Ideje egy újabb párosítási képernyõnek! Ezúttal Zach Leatherman van, a Filament Group-tól. Zach sokat kutatott, írt és beszélt a webes betűtípusok betöltéséről az elmúlt években. Van egy átfogó útmutató róla!
Van néhány probléma az egyéni betűtípusok alapértelmezett betöltési módjával. Csakúgy, mint egy betűtípus összekapcsolása néhány CSS-ben a @ font-face segítségével. Még azt is, ahogyan a Google Betűtípusok biztosítják betűkészleteik használatát, Zach anti-mintának hív (végső soron ez csak vanilla @ font-face). A különböző böngészők különböző dolgokat csinálnak a @ font-face használatával. Például a Safari egyes verziói az egyéni betűtípusban beállított típust láthatatlanná teszik, amíg a betűtípus be nem töltődik, de nincs időkorlátja, így ha a betűtípus bármilyen okból meghiúsul, akkor a legrosszabb esetre kerülhet: örökre láthatatlan szöveg az oldal.
A @ font-face betűtípusok betöltésének módját egyáltalán nem tudja ellenőrizni, hacsak nem saját kezébe veszi az ügyet. Ez a következőket jelenti: betűkészlet beillesztése, betűkészlet albeállítása (vagy „kritikus” karakterjelekkel, vagy legalább a karakterjelek csökkentése a használt nyelvre), betűtípusbetöltők használata annak meghatározásához, hogy a betűtípus mikor töltődik be, és az osztályok megváltoztatása a használatukhoz . Ez az utolsó különösen érdekes. A betűtípus-betöltés irányításakor nemcsak azzal kell foglalkoznia, hogy a böngésző mikor / hogyan tölti be a @ font-face arculatú CSS-t, hanem azzal is, hogy mikor / hogyan találkozik a böngésző olyan szöveges elemekkel, amelyeknek azt mondják, hogy használják ezeket a betűtípusokat. A nem használt betűtípusokat nem töltik le. Tehát néha az az eljárás, hogy letöltésre kényszerítik őket, megvárják a letöltést, majd osztályokat alkalmaznak a tényleges használatukra.
Néhány eszköz, amelyet megnéztünk:
- A Firefox DevTools jobban megfelelt a használt betűtípusok megtekintésére
- A betűtípusok alosztályozása a Font Squirrel generátorban vagy a Font Prep programban végezhető el.
- Milyen karakterjeleket oszt meg? Tesztelje, amire szüksége van bizonyos URL-címeken a Glyphhanger segítségével.
- Hogyan tudja megmondani, hogy a böngésző faux félkövér / dőlt betűt használ-e? faux-pas.