Zakaj spletne strani takoj ne prikažejo svojega besedila?

Če ste nagnjeni k gledanju brskalnika z orlovim očesom, ste morda opazili, da strani pogosto nalagajo svoje slike in postavitev, preden naložijo svoje besedilo - ravno nasprotni vzorec nalaganja, ki smo ga doživeli v devetdesetih letih. Kaj se dogaja?

Današnja seja vprašanj in odgovorov prihaja z namenom SuperUser-a, ki je del skupine Stack Exchange, ki temelji na skupnostih spletnih mest za vprašanja in odgovore.

Vprašanje

Bralca SuperUser Laurent je zelo radoveden, zakaj se zdi, da strani točno nalagajo elemente popolnoma drugače kot nekoč. On piše:

Opazil sem, da je pred kratkim veliko spletnih mest počasi prikazalo svoje besedilo. Običajno se ozadje, slike in podobno nalagajo, vendar ni besedila. Po določenem času se besedilo začne pojavljati tu in tam (ne vedno vsega ob istem času).

V bistvu deluje ravno nasprotno, kot je bilo prej, ko je bilo besedilo prikazano najprej, nato slike in ostalo se je naknadno naložilo. Kakšna nova tehnologija ustvarja to vprašanje? Kakšna ideja?

Upoštevajte, da sem na počasni povezavi, kar verjetno še povečuje težavo.

Za primer glej [zgoraj] - vse je naloženo, vendar traja nekaj sekund, preden se besedilo končno prikaže.

Torej, kaj daje? Laurent, in mnogi izmed nas, se spominjamo časa, ko se je besedilo naložilo najprej in vse ostalo - animirane GIF-e, popločana ozadja in vsi drugi artefakti poznega brskanja po internetu 90-ih so prišli kasneje. Kaj najprej povzroči trenutno stanje elementov oblikovanja, besedilo kasneje?

Odgovor

Sodelavka SuperUser Daniel Andersson ponuja čudovit in podroben odgovor, ki se spusti na dno zakaj-the-fonts-load-last mystery:

Eden od razlogov je, da spletni oblikovalci danes želijo uporabljati spletne pisave (običajno v formatu WOFF), npr. prek pisav Google Web.

Prej so bile edine pisave, ki so bile lahko prikazane na spletnem mestu, tiste pisave, ki jih je uporabnik lokalno namestil. Ker npr. Uporabniki Mac in Windows niso nujno imeli enakih pisav, oblikovalci pa so instinktivno vedno določali pravila kot

družina pisav: Arial, Helvetica, sans-serif; 

kjer, če prva pisava ni bila najdena v sistemu, bi brskalnik poiskal drugo, nazadnje pa "sans-serif" pisavo.

Zdaj lahko določite URL pisave kot pravilo CSS, da bo brskalnik prenesel pisavo, kot je:

@import url (http://fonts.googleapis.com/css?family=Droid+Serif:400,700); 

in nato naloži pisavo za določen element, npr.

družina pisav: 'Droid Serif', sans-serif; 

To je zelo priljubljeno, da lahko uporabite pisave po meri, vendar povzroča tudi težavo, da se nobeno besedilo ne prikaže, dokler brskalnik ne naloži vira, kar vključuje čas prenosa, čas nalaganja pisave in čas upodabljanja. Pričakujem, da je to artefakt, ki ga doživljate.

Kot primer: eden od mojih nacionalnih časopisov, Dagens Nyheter, uporablja spletne pisave za njihove naslove, ne pa tudi za njihove naslove, tako da ob nalaganju tega spletnega mesta ponavadi vidim prve, pol ure kasneje pa vse prazne prostore. z naslovi (to velja vsaj za Chrome in Opera. Nisem poskusil drugih).

(Tudi oblikovalci v teh dneh povsod povsod poškropijo JavaScript, zato morda nekdo poskuša narediti nekaj pametnega z besedilom, zaradi česar je zakasnjen. To bi bilo zelo specifično za spletno mesto, čeprav: splošna težnja po odložitvi besedila je verjetno, da je težava s spletnimi pisavami opisana zgoraj.)

Dodatek:

Ta odgovor je postal zelo potrjen, čeprav nisem šel v podrobnosti ali morda Ker tega. V vprašanju je bilo veliko pripomb, zato se bom malo poskušal razširiti […]

Očitno je ta pojav na splošno znan kot »bliskavica neobstojne vsebine« in še posebej »bliskavica nestisnjenega besedila«. Iskanje "FOUC" in "FOUT" daje več informacij.

Lahko priporočam objavo spletnega oblikovalca Paula Irisha na FOUT v povezavi s spletnimi pisavami.

Kar lahko opazimo je, da različni brskalniki to obravnavajo drugače. Napisal sem, da sem testiral Opera in Chrome, ki sta se obnašala podobno. Vsi tisti, ki temeljijo na WebKit-u (Chrome, Safari itd.), Se odločijo izogniti se FOUT-u do ne prikazovanje besedila spletne pisave z rezervno pisavo med obdobjem nalaganja spletnih pisav. Tudi če tam je predpomnjena spletna pisava volja biti zakasnitev. Obstaja veliko pripomb v tem vprašalniku, ki pravijo drugače in da je napačno, da se predpomnjena pisava obnašajo tako, vendar npr. iz zgornje povezave:

V katerih primerih boste dobili FOUT

• Volja: Prenos in prikaz oddaljenega ttf / otf / woff
• Volja: Prikazovanje predpomnjenega ttf / otf / woff
• Volja: Prenos in prikaz podatkov-uri ttf / otf / woff
• Volja: Prikazovanje predpomnjenih podatkov-uri ttf / otf / woff
• Nebom: Prikaz pisave, ki je že nameščena in poimenovana v vašem tradicionalnem nizu pisav
• Nebom: Prikaz pisave, ki je nameščena in imenovana z lokalno lokacijo ()

Ker Chrome čaka, da tveganje FOUT izgine pred upodabljanjem, to povzroči zamudo. Za katere obsegu učinek je viden (zlasti pri nalaganju iz predpomnilnika), se zdi, da je med drugim odvisen od količine besedila, ki ga je treba upodobiti, in morda drugih dejavnikov, vendar predpomnjenje ne odpravi popolnoma učinka.

Irščina ima tudi nekaj posodobitev glede obnašanja brskalnika od 2011-04-14 na dnu objave:

• Firefox (od FFb11 in FF4 Final) nima več FOUT! Http: //bugzil.la/499292 Besedilo je v bistvu nevidno za 3 sekunde, nato pa vrne pomožno pisavo. Webfont bo verjetno obremenil v teh treh sekundah, čeprav… upajmo…
• IE9 podpira WOFF in TTF in OTF (čeprav zahteva vdelavo bitset stvari - večinoma sporno, če uporabljate WOFF). Vendar !!! IE9 ima FOUT. :(
• Webkit ima popravek, ki čaka na izlet, da prikaže nadomestno besedilo po 0,5 sekundah. Torej enako obnašanje kot FF, vendar 0,5s namesto 3s.

Če bi bilo to vprašanje namenjeno oblikovalcem, bi se lahko lotili načinov, kako se izogniti takšnim težavam, kot je npr webfontloader, toda to bi bilo drugo vprašanje. Povezava s Paulom Irsko o tej zadevi še podrobneje.

Imate kaj dodati pojasnilu? Zvok izključen v komentarjih. Želite prebrati več odgovorov drugih uporabnikov tehnologije Stack Exchange? Oglejte si celotno nit razprave tukaj.