Čas na další párování screencastu! Tentokrát mám Zacha Leathermana z Filament Group. Zach za posledních několik let hodně zkoumal, psal a mluvil o načítání webových písem. Má k tomu komplexního průvodce!
Existují určité problémy s výchozím způsobem načítání vlastních písem. Stejně jako v případě, pouze propojení písma v některých CSS prostřednictvím @ font-face. I když vám Google Fonts umožňuje používat jejich písma, Zach volá anti-vzor (nakonec je to jen vanilla @ font-face). Různé prohlížeče dělají různé věci s @ font-face. Například některé verze Safari dělají typ nastavený ve vlastním písmu jako neviditelný, dokud se písmo nenačte, ale nemá časový limit, takže pokud písmo z jakéhokoli důvodu selže, můžete být v nejhorším scénáři: navždy neviditelný text na stránka.
Nemáte sakra velkou kontrolu nad tím, jak se načítají fonty @ font-face, pokud to nevezmete do svých rukou. To znamená věci jako: vložení písma, podmnožina písma (buď s „kritickou“ sadou glyfů, nebo alespoň redukcí glyfů na používaný jazyk), použití zavaděčů písma k určení, kdy se písma načtou, a změna tříd jejich použití . Ten poslední je obzvláště zajímavý. Při provádění kontroly nad načítáním písem se musíte vypořádat nejen s tím, kdy / jak prohlížeč načte CSS obsahující @ font-face, ale také kdy / jak prohlížeč narazí na textové prvky, které mají používat tato písma. Fonty, které se nepoužívají, se nestáhnou. Někdy je tedy postupem nutit je ke stažení, počkat, až se stáhnou, a poté použít třídy, aby je skutečně používaly.
Některé nástroje, na které jsme se podívali:
- Firefox DevTools byl lepší pro prohlížení používaných písem
- Subsetting fonts can be done in the Font Squirrel generator or Font Prep.
- Jaké glyfy podmnožuješ? Vyzkoušejte, co na určitých adresách URL potřebujete, pomocí Glyphhangeru.
- Jak zjistíte, že prohlížeč používá faux tučné / kurzíva? trapas.