Čas na ďalšie párovanie screencastu! Tentokrát mám na sebe Zacha Leathermana z Filament Group. Zach za posledných pár rokov vykonal veľa výskumov, písania a rozprávania o načítaní webového písma. Má k tomu komplexného sprievodcu!
Pri predvolenom spôsobe načítania vlastných písiem sa vyskytujú problémy. Rovnako ako v prípade, iba prepojenie písma v niektorých CSS prostredníctvom @ font-face. Aj keď Google Fonts umožňuje používať ich písma, Zach volá anti-vzor (nakoniec je to iba vanilla @ font-face). Rôzne prehliadače robia s @ font-face rôzne veci. Napríklad niektoré verzie Safari nastavujú typ písma vo vlastnom písme ako neviditeľný, kým sa písmo nenačíta, ale nemá časový limit, takže ak písmo z nejakého dôvodu zlyhá, môžete byť v najhoršom scenári: navždy neviditeľný text stránka.
Nemáte sakra veľkú kontrolu nad tým, ako sa načítajú písma @ font-face, pokiaľ to nezoberiete do svojich rúk. To znamená veci ako: vloženie písma, podmnožina písma (buď „kritickou“ sadou glyfov, alebo aspoň redukcia glyfov na používaný jazyk), použitie načítavačov písma na určenie, kedy sa písma načítajú, a zmena tried na ich použitie . Ten posledný je obzvlášť zaujímavý. Pri vykonávaní kontroly nad načítaním písma sa musíte zaoberať nielen tým, kedy / ako prehliadač načíta CSS, ktorý obsahuje @ font-face, ale aj tým, kedy / ako prehliadač narazí na textové prvky, ktoré majú tieto písma používať. Fonty, ktoré sa nepoužívajú, sa nestiahnu. Takže niekedy je postup nútený ich sťahovať, počkať na ich stiahnutie, potom použiť triedy, aby ich skutočne využili.
Niektoré nástroje, na ktoré sme sa pozreli:
- Firefox DevTools bol lepší na prezeranie používaných fontov
- Podmnožinu písiem je možné vykonať v generátore Font Squirrel alebo Font Prep.
- Aké glyfy podmnožuješ? Vyskúšajte, čo na určitých adresách URL potrebujete, pomocou aplikácie Glyphhanger.
- Ako zistíte, keď prehliadač používa faux tučné / kurzíva? trapas.