29Aug
Če ste nagnjeni k ogledu okna brskalnika z orelom, ste morda opazili, da strani pred nalaganjem besedila pogosto nalagajo svoje slike in postavitev - ravno nasprotno nakladalni vzorec, ki smo ga doživeli v devetdesetih letih prejšnjega stoletja. Kaj se dogaja?
Današnje vprašanje &S sejo odgovora prihaja uporaba SuperUserja, ki je razdeljena na Stack Exchange, skupinsko spletno stran Q & A.
Vprašanje
bralec SuperUserja Laurent je zelo radoveden, zakaj se zdi, da točno strani nalagajo elemente povsem drugače kot enkrat. Piše:
Opazil sem, da v zadnjem času mnoge spletne strani počasi prikazujejo svoje besedilo. Običajno se bodo nalagali ozadje, slike in podobno, brez besedila. Po nekaj časa se besedilo začne pojavljati tu in tam( ne vedno vsega istočasno).
V bistvu deluje obratno, kot se je zgodilo, ko je bilo prvo besedilo prikazano, so se slike in ostalo natovorili kasneje. Katere nove tehnologije ustvarjajo to težavo? Kakšna ideja?
Upoštevajte, da sem počasen, kar verjetno poudarja problem.
Za primer primerjajte [zgoraj], vse je naloženo, vendar traja še nekaj sekund, preden se končno prikaže besedilo.
Torej, kaj daje? Laurent in mnogi od nas se spomnite časa, ko je prvo naloženo besedilo in vse ostalo - poskrbljeno animirane GIF-je, ploščice ozadja in vsi drugi predmeti iz poznega 90-ih spletnih brskalnikov - prišli kasneje. Kaj povzroča trenutni položaj elementov oblikovanja najprej, besedilo pozneje?
Odgovorni sodelavec
SuperUserja Daniel Andersson ponuja čudovito podroben odgovor, ki postane desno na dnu zadnje skrivnosti zakaj-the-fonts-load:
Eden od razlogov je, da spletni oblikovalci danes želijo uporabljati spletne pisave( običajno v formatu WOFF), nprprek pisavGoogle Web.
V preteklosti so bile edine pisave, ki so se lahko prikazale na spletnem mestu, tiste, ki jih je uporabnik namestil lokalno. Ker npr. Uporabniki Mac in Windows nista nujno imeli enake pisave, oblikovalci instinktivno vedno določajo pravila kot
pisava-družina: Arial, Helvetica, sans-serif;, kjer bi v primeru, da v sistemu ni bila najdena prva pisava, bo brskalnik poiskal drugo in nazadnje nadomestno pisavo sans-serif.
Zdaj lahko URL-ju za pisavo določite kot pravilo CSS, če želite brskalnik prenesti pisavo kot tako:
@import url( http: //fonts.googleapis.com/ css? Družina = Droid + Serif: 400,700);in nato naložite pisavo za določen element, npr.:
font-family: 'Droid Serif', sans-serif;To je zelo priljubljeno, da lahko uporabljate prilagojene pisave, vendar pa povzroča tudi težavo, da se ne prikaže nobeno besedilo, dokler brskalnik ne naloži vira, ki vključuje čas prenosa, čas nalaganja pisave in čas postavitve. Pričakujem, da je to artefakt, ki ga doživljate.
Kot primer: eden od mojih nacionalnih časopisov, Dagens Nyheter, uporabljam spletne pisave za svoje naslove, ne pa tudi njihove naslove, zato je ob nalaganju tega mesta najpogosteje vidim vodnike in pol sekunde pozneje so vsi prazni presledki zgorajnaseljena z naslovi( to velja za Chrome in Opera, vsaj. Niso poskusili drugih).
( Poleg tega dizajnerji v teh dneh povsod popolnoma škropijo JavaScript povsod, zato morda nekdo poskuša narediti nekaj pametnega z besedilom, zato je odloženo. To bi bilo zelo specifično za spletno mesto: splošna težnja, da se besedilo zavlečeti časi so vprašanja o spletnih pisavah, opisana zgoraj. Verjamem.)
Dodatek:
Ta odgovor je postal zelo previden, čeprav nisem šel v veliko podrobnosti ali morda zaradi tega tega. V tem nizu je bilo veliko komentarjev, zato bom poskušal razširiti bit [...]
Pojav je očitno znan kot "bliskavost neobdelane vsebine" na splošno in še posebej "bliskavost neobdelanega besedila".Iskanje "FOUC" in "FOUT" daje več informacij.
Priporočam spletni oblikovalec Paul Irish na FOUT v povezavi s spletnimi pisavami.
Kaj lahko opozorimo, da različni brskalniki obravnavajo drugače. Zgoraj sem napisal, da sem preizkusil Opera in Chrome, ki sta se obnašala podobno. Vsi tisti na spletu, ki temeljijo na spletu( Chrome, Safari itd.), Se morajo izogibati FOUT s strani in ne , ki renderira spletno pisavo z nadomestno pisavo med obdobjem nalaganja spletnih strani. Tudi če je spletno pisava predpomnjena, bo postal zakasnitev .Obstaja veliko pripomb v tem vprašanju, ki govori drugače, in da je napačno napačno, da se predpomnjene pisave obnašajo takole, toda npr.iz zgornje povezave:
V katerih primerih boste dobili FOUT
- Will: Prenos in prikaz oddaljenega ttf /otf/ woff
- Bo: Prikaz cached ttf /otf/ woff
- Will: Prenos in prikaz podatkov v ura ttf /otf/ woff
- Will: Prikazovanje predpomnjenega podatkov-uri ttf /otf/ woff
- Ne bo: Prikazovanje pisave, ki je že nameščena in imenovana v tradicionalnem skladišču znakov
- Ne bo: Prikaz pisave, ki je nameščena in poimenovana z uporabo lokalnega() lokacija
Ker Chrome čaka, dokler ne preide na tveganje FOUT, preden se prikažejo, to pomeni zamudo. Na katero obseg je učinek viden( še zlasti pri natovarjanju iz predpomnilnika), je med drugim odvisna od količine besedila, ki ga je treba izvesti, in morda drugih dejavnikov, vendar predpomnjenje ne odstrani učinka v celoti.
Irski ima tudi nekaj posodobitev v zvezi z obnašanjem brskalnika od dneva v postavi:
- Firefox ( od FFb11 in FF4 Final) nima več FOUT! Wooohoo! Http: //bugzil.la/ 499292 V bistvu je besedilo nevidno za 3 sekunde, nato pa prinese nazaj nadomestno pisavo. Webfont bo verjetno naložil v teh treh sekundah, čeprav. .. upam, da. .
- IE9 podpira WOFF, TTF in OTF( čeprav zahteva, da je vdelava bitset stvar - večinoma moot, če uporabljate WOFF). HOWEVER! !!IE9 ima FOUT.:(
- Webkit ima popravek, ki čaka na kopijo, da pokaže 0,5 sekunde nadomestnega besedila. Tudi enako ravnanje kot FF, toda 0,5 s, namesto 3 s.
Če bi to bilo vprašanje, namenjeno oblikovalcem, bi se lahko izognili tem vrstamtežav, kot je webfontloader, toda to bi bilo drugo vprašanje, povezava Paul Irish pa je podrobneje razložena glede tega vprašanja
Želite kaj dodati k razlagi? Zvočni zapis v komentarjih Želite prebrati več odgovorov iz drugih tehnoloških rešitev, Uporabite puščične uporabnike Stack Exchange? Oglejte si celotno temo za razpravo tukaj