Font-display - CSS-trükkök

Anonim

A font-displaytulajdonság meghatározza, hogy a betűkészlet fájlokat hogyan tölti be és jeleníti meg a böngésző. Arra a @font-faceszabályra alkalmazzák, amely meghatározza az egyedi betűtípusokat egy stíluslapban.

@font-face ( font-family: 'MyWebFont'; /* Define the custom font name */ src: url('myfont.woff2') format('woff2'), url('myfont.woff') format('woff'); /* Define where the font can be downloaded */ font-display: fallback; /* Define how the browser behaves during download */ )

Értékek

A font-displayszálláshely öt értéket fogad el:

  • auto(alapértelmezett): Lehetővé teszi a böngésző számára az alapértelmezett módszer használatát a betöltéshez, amely leggyakrabban hasonló az blockértékhez.
  • block: Utasítja a böngészőt, hogy rövid ideig rejtse el a szöveget, amíg a betűtípus teljesen le nem töltődik. Pontosabban: a böngésző láthatatlan helyőrzővel rajzolja meg a szöveget, majd a betöltéskor kicseréli az egyedi betűtípussal. Ezt „láthatatlan szöveg villanásának” vagy FOIT-nak is nevezik.
  • swap: Utasítja a böngészőt, hogy a tartalék betűtípus használatával jelenítse meg a szöveget, amíg az egyéni betűtípus teljesen le nem töltődik. Ez más néven „stílus nélküli szöveg villanása” vagy FOUT.
  • fallback: Kompromisszumként működik az autoés swapértékek között. A böngésző körülbelül 100 ms-ig elrejti a szöveget, és ha a betűtípust még nem töltötték le, akkor a tartalék szöveget fogja használni. Letöltés után kicserélődik az új betűtípusra, de csak rövid (valószínűleg 3 másodperces) csereidőszak alatt.
  • optional: Ez fallbackaz érték hasonlóan azt mondja a böngészőnek, hogy kezdetben rejtse el a szöveget, majd váltson át egy tartalék betűtípusra, amíg az egyéni betűtípus használható lesz. Ez az érték azonban lehetővé teszi a böngésző számára annak eldöntését, hogy egyáltalán használják-e az egyéni betűtípust, a felhasználó csatlakozási sebességét használva meghatározó tényezőként, ahol a lassabb kapcsolatok ritkábban kapják meg az egyéni betűtípust.

Itt van egy másik módszer arra, hogy gondoljon rájuk

Blokkolási időszak Csereidőszak
Blokk Rövid Végtelen
csere Egyik sem Végtelen
tartalék Rendkívül rövid Rövid
választható Rendkívül rövid Egyik sem

Miért van szükségünk font-display

Mielőtt széles körű támogatást kaptunk volna @font-face, tipográfiai arzenálunk a helyi betűtípusokra korlátozódott, ahol az egyetlen elérhető betűtípus volt az, amelyet előre feltöltöttek a végfelhasználó számítógépére. Azért hívjuk ezeket a „webbiztonságos” betűtípusokat, mert a böngészőnek nem kell semmit letöltenie ahhoz, hogy megjelenjenek.

Ezután jött a @font-faceszabály, amely a webdesignereknek és a front-end fejlesztőknek új tipográfiai hatásköröket adott, az eddigiektől eltérően. Ez lehetővé tette számunkra, hogy betűtípusfájlokat feltöltsünk egy szerverre, és a stíluslapjainkba olyan szabályokat írjunk, amelyek megnevezik a betűtípust, és megmondják a böngészőnek, hová töltse le a fájlokat. Olyan szolgáltatásokat is létrehozott, mint a Google Fonts, amelyek egyedi betűkészleteket hoztak a tömegek elé. Végül megdöntöttek egy jelentős akadályt, amely elválasztotta a webdizájnt a nyomtatástól!

Az egyedi betűtípusok azonban költségekkel jártak (és továbbra is jönnek). A betűtípusfájlok nagyok lehetnek, és a fájlok letöltésére fordított extra idő lelassíthatja a webhely teljesítményét, különösen a lassabb hálózati kapcsolaton lévő eszközök esetén. Tényezővé vált a korlátozott adatcsomagok felhasználói számára felmerülő többletköltség is.

Az egyedi betűtípusok kapcsán felmerült másik különös aggodalom az, amit „stilizált szöveg villanásának” vagy röviden FOUT-nak neveztek. A böngészők alapértelmezés szerint a rendszer betűtípusát jelenítik meg, miközben az egyéni betűtípus letöltésére várnak. Ez lehetővé tette a weboldalak gyorsabb betöltését, de aggodalmat keltett a webtervezők körében, akik ezt a felhasználói élmény eltérítésének és a tervezett terv félrevezetésének tekintették. A webböngészők manapság általában elrejtik a szöveget, amíg az egyedi betűtípus le nem töltődik, amit most „láthatatlan szöveg villanásának” vagy FOIT-nak nevezünk.

Sem a FOUT, sem a FOIT nem nagyszerű. Van módunk optimalizálni az egyedi betűtípusok teljesítményét a hatások megkönnyítése érdekében. Most azonban el font-displaykell mondanunk a böngészőnek, hogy inkább a FOUT-ot, a FOIT-ot, vagy akár valami kettőt választunk.

Támogatás tesztelése

Šime Vidas megjegyezte, érdekes figyelmeztetés:

A CSS font-display egy @font-faceleíró és nem tulajdonság, ezért a böngészőben történő támogatása nem tesztelhető szolgáltatáskérdésekkel (CSS- @supportsszabály és CSS.support API).

Több információ

  • CSS betűtípus-megjelenítés vezérlők 1. modul specifikáció: A tulajdonság specifikációjának vázlata.
  • font-display tömegek számára: Jeremy Wagner bemutatott minket az itt található ingatlanra a CSS-Tricks oldalon.
  • Használata @font-face: A szabály átfogó magyarázata és a használatának bevált módszerei.
  • Rendszer betűkészlet: Részlet az egyéni betűtípusok teljes elvetéséhez, és kizárólag a felhasználó rendszer betűtípusaira támaszkodhat.
  • A betűtípus teljesítményének ellenőrzése a következővel font-display: Finom írás a témáról a Google által.

Böngésző támogatás

Ez a böngésző támogatási adat a Caniuse cégtől származik, amely részletesebben szerepel. Egy szám azt jelzi, hogy a böngésző támogatja az adott és újabb verziók szolgáltatásait.

Asztal

Króm Firefox AZAZ Él Szafari
60 58 Nem 79 11.1

Mobil / Tablet

Android Chrome Android Firefox Android iOS Safari
88 85 81. 11.3-11.4