29Aug
Ha a böngésző ablaktáblát szemmel nézheti, észrevette, hogy az oldalak gyakran betöltik képüket és elrendezésüket a szövegük betöltése előtt - az ellentétes betöltési mintát, amelyet az 1990-es években tapasztaltunk. Mi történik?
A mai kérdés &A válaszüzenet a SuperUser - a Stack Exchange megosztottságának köszönhetően - a Q & A webhelyek közösségi szintű csoportosítása.
A
SuperUser olvasó kérdése Laurent nagyon kíváncsi arra, hogy pontosan az oldalak úgy tűnnek, hogy az elemeket teljesen másként betöltik, mint egykor. Azt írja:
Észrevettem, hogy a közelmúltban sok weboldal lassan jeleníti meg szövegét.Általában a háttér, a képek és így tovább be lesz töltve, de nincs szöveg. Néhány idő múlva a szöveg itt és ott megjelenik( nem mindig mind egy időben).
Alapvetően úgy működik az ellenkezője, mint korábban, amikor először megjelenik a szöveg, majd a képek és a többiek betöltődnek utána. Milyen új technológiát hoz létre ez a probléma? Bármilyen ötlete?
Vegyük észre, hogy lassú kapcsolatban vagyok, ami valószínűleg kiemeli a problémát.
Lásd [fent] példát - minden betöltött, de még néhány másodpercet vesz igénybe, mielőtt a szöveg végül megjelenik.
Szóval mi ad? Laurent, és sokan közülünk emlékszünk egy olyan időpontra, amikor a szöveg elsőként és minden más eszközön - az animált GIF-ek, a hátterek és a 90-es évek végi webes böngészés minden más tárgya - jöttek később. Mi okozza a tervezési elemek jelenlegi helyzetét, később a szöveget?
A válasz
A SuperUser közreműködője, Daniel Andersson csodálatosan részletes választ ad, amely a legfrissebb titokzatosság mélyére jut: az
Az egyik oka az, hogy a webes tervezők manapság szeretnék használni a webes betűtípusokat( általában WOFF formátumban), példáulthroughGoogle webes betűtípusokat.
Korábban az egyetlen olyan betűtípus volt, amely a webhelyen megjeleníthető volt, a felhasználó által telepített helyi betűtípusok. Mivel pl. A Mac és a Windows felhasználóknak nem feltétlenül voltak azonos betűk, a tervezők ösztönösen mindig szabályokat definiáltak
font-family-ként: Arial, Helvetica, sans-serif;ahol, ha az első betűtípus nem található a rendszeren, akkor a böngésző a második, végül pedig a tartalék "sans-serif" betűtípust keresné.
Mostantól CSS szabályként megadhatunk egy betűs URL-t, hogy a böngésző letöltse a betűtípust:
@import url( http: //fonts.googleapis.com/ css? Family = Droid + Serif: 400,700);, majd betöltse a betűtípust egy adott elemhez például:
font-family: 'Droid Serif', sans-serif;Ez nagyon népszerű az egyedi betűkészletek használatához, de azt is okozza, hogy a böngésző nem tölti be a szöveget, amíg a forrás betöltötte a fájlt, amely tartalmazza a letöltési időt, a betöltési időt és a megjelenítési időt. Arra számítottam, hogy ez a műtárgy, amit tapasztal.
Például: az egyik nemzeti újságom, Dagens Nyheter, webes betűtípusokat használ a címlapjaimhoz, de nem a leadjeiket, így ha betöltötte a webhelyet, először látom a vezetőket, és fél másodperccel később minden üres mezőt a fentiektele van főcímekkel( ez legalább igaz a Chrome-ra és az Opera-ra).
( A tervezők is szétszórják a JavaScriptet mindenütt napjainkban, szóval talán valaki megpróbál valami okosat csinálni a szöveggel, ezért késik.) Ez nagyon helyspecifikus lenne: a szöveg általános vonása késni fogezek az idők a fent leírt webes betűkészlet-probléma.)
Hozzáadás:
Ez a válasz nagyon felhangolt, bár nem részleteztem részletesen, vagy talán -t, mert ez az .Sok kérdés merült fel a kérdéssorban, szóval megpróbálok kicsit kibővíteni [...]
A jelenséget általában "nem sztenderd tartalom" villanásnak hívják, és különösen az "unstyled szöveg villanását".A "FOUC" és a "FOUT" keresése több információt ad.
ajánlom a webes tervező Paul Irish postját a FOUT webes betűkészletekkel kapcsolatban.
Meg lehet jegyezni, hogy a különböző böngészők másként kezelik. Fent említettem, hogy teszteltem az Opera-t és a Chrome-ot, akik mindketten hasonlóan viselkedtek. Minden WebKit-alapú( Chrome, Safari stb.) A nem a weboldal betűszövegének megjelenítésével választja meg a webes betűtípus szöveget betöltő betűtípussal a webes betűtípus betöltési időszakában. Még ha az internetes betűtípus is gyorsítótárba kerül, a lesz egy render késleltetés .Nagyon sok megjegyzés található ebben a kérdésben, amikor másként szól, és hogy rossz, hogy a gyorsítótárazott betűtípusok így viselkednek, pl.a következő linkről:
Milyen esetekben kapsz egy FOUT
- Will: Távoli ttf letöltése és megjelenítése /otf/ woff
- Will: Egy gyorsítótárba rendezett ttf /otf/ woff
- Will: Adatok letöltése és megjelenítése ë ttf /otf/ woff
- Will: Egy tárolt adatok megjelenítése uri ttf /otf/ woff
- Nem: Olyan betűtípus megjelenítése, amely már telepítve van és megnevezve a hagyományos betűtípusban
- Nem: Olyan betűtípus megjelenítése, amelyet a helyi() helyszín
Mivel a Chrome elvárja, amíg a FOUT kockázat el nem tűnik a renderelés előtt, ez késleltetést okoz. Melyik az effektus látható( különösen, ha a cache-ból való betöltés) úgy tűnik, függ többek között attól, hogy mekkora mennyiségű szöveg jelenik meg, és esetleg más tényezők is vannak, de a gyorsítótár nem teljesen távolítja el a hatást.
Az ír a böngészõ viselkedésérõl is némi frissítést tartalmaz a 2011-04-14-es pozíció alján:
- Firefox ( az FFb11 és az FF4 Final-tól) már nincs FOUT! Wooohoo! Http: //bugzil.la/ 499292 Alapvetően a szöveg láthatatlan 3 másodpercig, majd visszaadja a visszaesett betűtípust. A webfont valószínűleg betölti a három másodperc alatt. .. remélhetőleg. .
- Az IE9 támogatja a WOFF és a TTF és az OTF( bár ehhez egy beágyazott bajt-dolog szükséges - főként a WOFF használatával). mindamellett! !!Az IE9-nek van egy FOUT.:(
- A Webkitnek van egy javítócsomója, amely fél másodperc múlva megjelenik a visszaesett szöveg, így ugyanaz a viselkedés, mint az FF, de a 0.5-es helyett a 3-as értékek.
Ha ez a tervezők számára készült,mint például a webfontloader, de ez egy másik kérdés: a Paul Irish kapcsolat részletesebben foglalkozik ezzel a kérdéssel:
Van valami hozzá a magyarázathoz?a tapasztalt Stack Exchange-felhasználókat? Nézze meg a teljes vitafonalat itt: