FOIT, FOUT és a font-display property

Szerző: Mérei Tamás   |   2019-02-15

Webfontok használata esetén gyakori jelenség a FOUT (Flash of Unstyled Text) és FOIT (Flash of Invisible Text). Nem komoly problémáról van szó, szerintem a webfejlesztők 99%-a egyáltalán nem foglalkozik vele. Ha valaki azonban abszolút 100%-os performance-ra törekszik, érdemes egy kicsit elmerülni a témában.

FOUT-ról akkor beszélünk amikor a böngésző még nem töltötte le a webfontot, de ennek ellenére megjeleníti a szöveget. Ilyenkor egy fallback betűtípus töltődik be, amit mi határozhatunk meg a font stack-ben. Ha nincs ilyen, akkor a default rendszer betűtípus kerül betöltésre. Abban a pillanatban ahogy a webfont letöltődik, a szöveg betűtípusa hirtelen megváltozik, amit egy villanásnak észlelünk, innen a jelenség neve.

A FOUT elkerülése érdekében a böngészők eltérő módszereket alkalmaznak. Általános megoldás, hogy 3 másodpercet várnak a webfont betöltésére és addig semmilyen szöveget nem jelenítenek meg. Ha ennyi idő alatt sem töltődik le a webfont, akkor a szöveg a fallback betűtípussal jelenik meg. Ezzel ugyan elkerülhető a FOUT, viszont, a semmiből hirtelen előtűnő szöveg miatt FOIT jelenségről beszélünk.

A böngészők alapértelmezett font renderelési metódusát korábban csak JavaScript segítségével tudtuk módosítani. Ennek kiváltására vezették be a font-display CSS property-t, melyhez hat különböző érték tartozik:

  • auto Ez az alapértelmezett, a böngészőre bízzuk a dolgot.
  • swap A szöveg azonnal renderelésre kerül a fallback betűtípussal amíg a webfont le nem töltődik. Akkor célszerű használni, ha a dizájn kevésbé fontos és szövegnek azonnal látszódnia kell az oldalon. Hátránya, hogy FOUT jelenség előfordulhat.
  • block A szöveg egész addig láthatatlan marad, amíg a webfont le nem töltődik. Akkor érdemes használni, ha a szöveges tartalom valamilyen oknál fogva kizárólag a webfonttal olvasható. FOIT jelenség előfordulhat, és akár az is, hogy egyáltalán nem jelenik meg szöveg az oldalon, ha a webfont valamiért nem töltődik be.
  • fallback A block és a swap közötti arany középút. A FOIT elkerülése érdekében csak nagyon kevés ideig nem jeleníti meg a szöveget (100 ms). Ha ennyi idő alatt nem töltődik le a webfont, akkor utána már nem változtatja meg az oldal betűtípusát. Ezzel a módszerrel elkerülhető a FOIT és FOUT is, viszont előfordulhat, hogy az oldalunk a fallback betűtípussal töltődik be és úgy is marad. Ha ezt meglátja az oldalt tervező grafikus, valószínűleg égnek áll a haja 🙂
  • optional Hasonló a fallback-hez, azzal a különbséggel, hogy itt a böngészőre van bízva a dolog. Ha a nagyon rövid (100 ms) block period alatt nem töltődött le a webfont, a böngésző dönti el a továbbiakat. Ha a letöltési probléma a user alacsony sávszélességének köszönhető, felesleges tovább erőltetni a webfont letöltését a háttérben, ergo marad a fallback font.

A font-display jelenleg Firefox, Chrome, Safari és Opera alatt működik.

A leírtak alapján azt hiszem kijelenthető, hogy ha a webfont betöltési ideje 100 ms alatt van, akkor nem kell ezzel a problémával foglalkozni. Ezért (is) fontos, hogy csak azokat a fontokat töltsük be, amiket valóban használunk az oldalon.

Hozzászólás

Keresés a blogon
Kategóriák
Legújabb hozzászólások
  • A villanyszerelés örömei panelben

    Ha három fázisod van, akkor három fázisú Fi relét kell venni....

  • A villanyszerelés örömei panelben

    Szia, ha panellakásba három vezetéken jön be az egy fázis, akkor három fi relét kellene berakni?...

  • A villanyszerelés örömei panelben

    "3 vezeték jön be, fázis-nulla-föld, tehát már az óránál szétválasztották a PEN vezetéket PE-re és N-re vagy más módon, de külön vezetéken jön az N és...

  • Dia szkennelés házilag

    Ezt a fajtát nem tudom, hogy lehet még kapni. Normál diavetítőt lehet kapni nagyobb játékboltokban például....

  • Bootstrap carousel

    Ennél a réginél nem tudom, hogy volt e már ilyen opció, de az újnál már van olyan, hogy touch="true"...

  • Adobe XD VS. Lunacy

    Sketch-et nem használok, mert nincs mac-em. Axure-t használok, arról találsz anyagot az oldalon....

  • Adobe XD VS. Lunacy

    Kedves Cyrex! A Sketch és az Axure UX-UI designer programok? Te melyiket használod ha használsz ilyen programokat? Köszönöm, üdv Balázs...

  • Bootstrap carousel

    Kedves Tamás! Az megoldható, hogy mobilon ne a nyilakra koppintva, hanem ujjal húzva váltsam a képeket? Köszönöm a sok hasznos videót. Üdvözlettel:...

  • Dia szkennelés házilag

    Ilyen diavetítőt hol lehet beszerezni?...

  • A villanyszerelés örömei panelben

    Ha nincsen a házban központilag rendbe rakva, akkor veszett fejsze nyele... Kialakíthatsz otthon EPH sínt, de ez már egy másik szint. 7kW felett 10m...

  • A villanyszerelés örömei panelben

    Ez a kábelcsatornás szegőléc nagyon jól néz ki. Szinte biztos, hogy a fürdő / konyha földelése lesz. Máshova nem vittek régen földet. Ha te húzod be a...

  • A villanyszerelés örömei panelben

    Köszönöm a gyors választ, akkor megpróbálom multiméterrel megkeresni, remélem csak a fürdő és a konyha földelését vitték innnen, nem a szomszéd lakásé...