29Aug
Ak ste náchylní na sledovanie okna prehliadača pomocou orla, pravdepodobne ste si všimli, že stránky často načítavajú svoje obrázky a rozloženie pred načítaním textu - presný opačný vzorec zaťaženia, ktorý sme zažili počas deväťdesiatych rokov 20. storočia.Čo sa deje?
dnešná otázka &Odpoveď na zasadnutie nám príde s láskavým dovolením SuperUser - subdivíziu Stack Exchange, komunitne riadeného zoskupenia webových stránok Q & A.
Otázka
Reader SuperUser Laurent je veľmi zvedavý, prečo sa presne zdá, že stránky načítajú elementy úplne inak než raz. Píše:
Všimol som si, že v poslednej dobe sa mnohé webové stránky pomaly zobrazujú svoj text. Zvyčajne sa načítajú pozadie, obrázky a podobne, ale žiadny text. Po nejakom čase sa text začína objavovať sem a tam( nie vždy to všetko súčasne).
V podstate funguje opačný ako predtým, keď bol text najprv zobrazený, potom sa obrazy a zvyšok načítavali. Aká nová technológia vytvára tento problém? Nejaký nápad?
Všimnite si, že som na pomalom pripojení, čo pravdepodobne zvýrazňuje problém.
Pozri [vyššie] príklad - všetko je načítané, ale trvá to pár sekúnd, kým sa text konečne zobrazí.
Tak čo dáva? Laurent a mnohí z nás si pamätajú, že čas, kedy bol načítaný prvý text a všetko ostatné - skryté animované GIFy, dlaždené pozadia a všetky ostatné artefakty prehliadania webových stránok koncom deväťdesiatych rokov - prišli neskôr.Čo spôsobuje aktuálnu situáciu dizajnových prvkov, text neskôr?
Odpoveď
Superuser prispievateľ Daniel Andersson ponúka úžasne detailný odpoveď, ktorá dostane priamo k dnu prečo-the-fonts-zaťaženie posledný tajomstvo:
Jedným z dôvodov je skutočnosť, že webové dizajnérmi dnes radi používajú webové fonty( obvykle vo formáte WOFF), naprprostredníctvom webových písiem Google.
Predtým boli jediné písma, ktoré sa mohli zobraziť na webových stránkach, tie, ktoré používateľ lokálne nainštaloval. Pretože napr. Používatelia počítačov Mac a Windows nemuseli mať nevyhnutne rovnaké písma, inštruktéri inštinktívne vždy definovali pravidlá ako
font-family: Arial, Helvetica, sans-serif;kde, ak prvé písmo nebolo nájdené v systéme, prehliadač by hľadať druhý a nakoniec núdzové písmo "sans-serif".
Teraz môže niekto dať URL písma ako pravidlo CSS, aby prehliadač k stiahnutiu písma, ako napríklad:
@import URL( http: //fonts.googleapis.com/ css family = Droid + Serif: 400700);a potom načítať písmo pre konkrétny prvok napr.:
font-family: 'Droid Serif', sans-serif;Toto je veľmi populárne na to, aby bolo možné používať vlastné písma, ale vedie to aj k problému, že sa nezobrazí žiadny text, pokiaľ nie je zdroj načítaný prehliadačom, čo zahŕňa čas sťahovania, čas načítania fontov a čas renderovania. Očakávam, že to je artefakt, ktorý zažívate.
Ako príklad: Jeden z mojich celoštátnych novinách, Dagens Nyheter, využitie webových fontov pre ich titulky, nie však ich vedenie, takže keď je načítaný, že miesto som zvyčajne vidieť vodiče prvej a pol sekundy neskôr všetky medzery vyššie súobývaný titulkami( to platí v prehliadači Chrome a Opera aspoň)..
( tiež návrhári posypeme JavaScript úplne všade v týchto dňoch, takže možno niekto snaží urobiť niečo chytrého s textom, čo je dôvod, prečo sa oneskorením To by bolo veľmi site specific, aj keď: všeobecná tendencia pre text, ktorý sa oneskorenímtáto doba je otázka webové fonty je popísané vyššie, verím)
Doplnok: .
Táto odpoveď sa stala veľmi upvoted, keď som nešiel do veľkých podrobností, alebo snáď pretože to .V otázke vlákna bolo veľa komentárov, preto sa pokúsim rozšíriť trochu [...]
Tento fenomén je zrejme známy ako "blesk z neštandardného obsahu" vo všeobecnosti a "flash neštandardného textu".Hľadanie výrazov "FOUC" a "FOUT" poskytuje viac informácií.
Môžem odporučiť príspevok webdesignera Paul Irish na FOUT v súvislosti s webovými písmenami.
Možno poznamenať, že rôzne prehliadače to zvládajú inak. Napísal( a) som, že som skúšal Opera a Chrome, ktorí sa podobne správali. Všetky stránky založené na WebKit( Chrome, Safari atď.) Sa rozhodnú vyhnúť sa FOUT pomocou a nie vykresľujúce text písma na webe s náhradným písmom počas obdobia načítania fontov na webe. Aj keď je písmo uložené v cache, bude oneskorením renderovania .Existuje veľa pripomienok v tejto otázke vlákna hovoria inak a že je plochý zle, že písma v cache sa správajú takto, ale napr.z vyššie uvedeného odkazu:
V akých prípadoch získate FOUT
- Will: Stiahnutie a zobrazenie vzdialeného ttf /otf/ woff
- Will: Zobrazenie vyrovnávacej pamäte ttf /otf/ woff
- Will: Načítanie a zobrazenie údajov ttf /otf/ woff
- Will: Zobrazenie ukladaného dátového súboru ttf /otf/ woff
- Nebude: Zobrazenie písma, ktoré je už nainštalované a pomenované v klasickom zásobníku písma
- Nebude: Zobrazenie písma, ktorý je nainštalovaný a pomenovaný pomocou lokálneho() umiestnenie
Pretože prehliadač Chrome čaká, kým sa riziko FOUT nezmizne pred vykresľovaním, to spôsobí oneskorenie. Ktorý rozsah účinok je viditeľný( najmä pri načítaní z vyrovnávacej pamäte) sa zdá závisieť okrem iného na množstve textu, ktorý treba vykresliť a možno aj na iné faktory, ale ukladanie do vyrovnávacej pamäte úplne neodstráni účinok.
Irish má tiež niekoľko aktualizácií týkajúcich sa správania sa prehliadača od 2011-04-14 v spodnej časti príspevku:
- Firefox ( od FFb11 a FF4 Final) už nemá FOUT! Wooohoo! Http: //bugzil.la/ 499292 V podstate je text neviditeľný po dobu 3 sekúnd a potom vráti spätné písmo. Webfont bude pravdepodobne zaťažený v priebehu týchto troch sekúnd, hoci. .. dúfajme. .
- IE9 podporuje WOFF a TTF a OTF( aj keď to vyžaduje vkladanie bitset vec - väčšinou neplatí, ak používate WOFF). HOWEVER! !!IE9 má FOUT.:(
- Webkit má náplasť čakajúca na zem, aby ukázala záložný text po 0,5 sekundách. Takže rovnaké správanie ako FF, ale 0,5s namiesto 3s
Ak to bola otázka určená pre návrhárov, človek by mohol ísť do spôsobov, ako sa vyhnúť týmto typomz problémov, ako je webfontloader, ale to by bola ďalšia otázka: Paul Irish link sa podrobnejšie venuje tejto téme
Máte niečo doplniť vysvetlenie Vyjadrite sa v komentároch Chcete čítať viac odpovedí od iných tech-Skúsení používateľov Stack Exchange? Pozrite sa na celý diskusný príspevok tu