Dnešná relácia otázok a odpovedí sa k nám pridelí zdvorilosťou SuperUser - podskupiny Stack Exchange, skupín webových stránok týkajúcich sa otázok a odpovedí.
Otázka
Reader SuperUser Laurent je veľmi zvedavý, prečo sa zdá, že presne stránky načítajú prvky úplne inak než raz. On píše:
I’ve noticed that recently many websites are slow to display their text. Usually, the background, images and so on are going to be loaded, but no text. After some time the text starts appearing here and there (not always all of it at the same time).
It basically works the opposite as it used to, when the text was displayed first, then the images and the rest was loading afterwards. What new technology is creating this issue? Any idea?
Note that I’m on a slow connection, which probably accentuates the problem.
See [above] for an example – everything’s loaded but it takes a few more seconds before the text is finally displayed.
Takže č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 90. rokov - neskôr. Čo spôsobuje aktuálnu situáciu dizajnových prvkov, text neskôr?
Odpoveď
Sponzor SuperUser Daniel Andersson ponúka úžasne podrobnú odpoveď, ktorá sa dostane priamo do spodnej časti záhadu myslenia:
One reason is that web designers nowadays like to use web fonts (usually in WOFF format), e.g. throughGoogle Web fonts.
Previously, the only fonts that were able to be displayed on a site was those that the user had locally installed. Since e.g. Mac and Windows users not necessarily had the same fonts, designers instinctively always defined rules as
font-family: Arial, Helvetica, sans-serif;
kde, ak prvý font nebol nájdený v systéme, prehliadač by hľadať druhý a nakoniec núdzové písmo "sans-serif".
Teraz je možné uviesť adresu URL písma ako pravidlo CSS, aby sa prehliadač dostal k stiahnutiu písma:
@import url(https://fonts.googleapis.com/css?family=Droid+Serif:400,700);
a potom načítať písmo pre konkrétny prvok napríklad:
font-family: 'Droid Serif',sans-serif;
To 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, kým sa do prehliadača nenachádza zdroj, čo zahŕňa čas sťahovania, čas načítania písma a čas vykresľovania. Očakávam, že to je artefakt, ktorý zažívate.
Ako príklad: jeden z mojich národných novín, Dagens Nyheter, používa webové písma pre ich titulky, ale nie ich vedie, takže keď je táto webová stránka načítaná, zvyčajne vidím vodiče ako prvý a o pol sekundy neskôr sa všetky prázdne miesta naplnia s titulkami (to platí v prehliadači Chrome a Opera aspoň.
(Tiež dizajnéri posypať JavaScript absolútne všade v týchto dňoch, takže možno niekto sa snaží robiť niečo šikovné s textom, čo je dôvod, prečo to je oneskorené.To by bolo veľmi site-špecifické, hoci: všeobecná tendencia textu byť oneskorený v týchto Times je otázka webových písiem popísaná vyššie, verím.)
Doplnenie:
Táto odpoveď sa stala veľmi upvoted, aj keď som nešiel do detailov, alebo možnopretože z toho. Tam bolo veľa komentárov v otázke vlákno, takže sa budem snažiť rozšíriť trochu […]
Tento fenomén je zjavne známy ako "blesk z neštrtujúceho obsahu" vo všeobecnosti a "blikanie nezmazané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 programy založené na WebKit (Chrome, Safari atď.) Sa rozhodli vyhnúť sa výpadku FOUTnie vykresľovanie textového textu na webe s náhradným písmom počas obdobia načítania fontov na webe. Aj keď webový font je uložený do vyrovnávacej pamäte, tamvôľa byť oneskorením vykreslenia, 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 dostanete FOUT
- will: Sťahovanie a zobrazenie vzdialeného ttf / otf / woff
- will: Zobrazenie vyrovnávacej pamäte ttf / otf / woff vo vyrovnávacej pamäti
- will: Sťahovanie a zobrazovanie ú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 () umiestnenia
Vzhľadom na to, že Chrome čaká, kým sa pred vykresľovaním stratí riziko FOUT, to spôsobí oneskorenie. Ku ktorémurozsah efekt je viditeľný (najmä pri načítaní z vyrovnávacej pamäte), zdá sa, závisí okrem iného na množstve textu, ktorý treba vykresliť a možno aj na iných faktoroch, ale ukladanie do vyrovnávacej pamäte úplne neodstráni účinok.
Írsky tiež obsahuje niektoré aktualizácie týkajúce sa správania prehliadača od 2011-04-14 v dolnej č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 záložný font. 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 veci bitset - väčšinou niečo, ak používate WOFF). ALE !!! IE9 má FOUT.:(
- Webkit má náplasť čakajúca na pristátie, aby zobrazila núdzový text po 0,5 sekundách. Rovnaké správanie ako FF, ale 0,5s namiesto 3s.
Ak by to bola otázka určená pre dizajnérov, mohli by sa nájsť spôsoby, ako sa vyhnúť takýmto typom problémov, akými sú napr
webfontloader
ale to by bola ďalšia otázka. Odkaz na Pavla írskeho odkazuje na túto otázku.
Máte niečo doplniť vysvetlenie? Zvuk vypnúť v komentároch. Chcete si prečítať viac odpovedí od iných používateľov technológie Stack Exchange? Pozrite sa na celý diskusný príspevok tu.
