E timpul pentru un alt screencast de împerechere! De data aceasta îl am pe Zach Leatherman, de la Filament Group. Zach a făcut multe cercetări, scriind și vorbind despre încărcarea fonturilor web în ultimii ani. Are un ghid cuprinzător despre asta!
Există unele probleme cu modul implicit de încărcare a fonturilor personalizate. Ca și în, doar conectarea unui font în unele CSS prin @ font-face. Chiar și modul în care Google Fonts vă oferă utilizarea fonturilor lor Zach numește un anti-model (în cele din urmă este doar vanilla @ font-face). Browsere diferite fac lucruri diferite cu @ font-face. De exemplu, unele versiuni ale Safari fac ca tipul setat într-un font personalizat să fie invizibil până când fontul se încarcă, dar nu are timeout, deci dacă fontul eșuează din orice motiv, ați putea fi în cel mai rău caz: textul invizibil pentru totdeauna pe Site-ul.
Nu aveți nici un control asupra modului în care se încarcă fonturile @ font-face, cu excepția cazului în care luați lucrurile în mâinile voastre. Asta înseamnă lucruri precum: înclinarea fontului, subsetarea fontului (fie cu un set „critic” de glife, sau cel puțin reducerea glifelor la limba utilizată), utilizarea încărcătoarelor de fonturi pentru a determina când se încarcă fonturile și modificarea claselor pentru a le utiliza . Ultimul este deosebit de interesant. Când exercitați controlul asupra încărcării fontului, nu trebuie doar să vă ocupați de momentul / modul în care browserul încarcă CSS care conține @ font-face, ci și de momentul / modul în care browserul întâlnește elemente de text cărora li se spune să folosească aceste fonturi. Fonturile care nu sunt utilizate nu sunt descărcate. Deci, uneori procedura constă în obligarea lor să descarce, așteptați descărcarea lor, apoi aplicați cursuri pentru a le folosi efectiv.
Câteva instrumente pe care le-am analizat:
- Firefox DevTools a fost mai bun pentru a căuta fonturile utilizate
- Subsetarea fonturilor se poate face în generatorul Font Squirrel sau Font Prep.
- Ce glifuri subsetezi? Testați de ce aveți nevoie la anumite adrese URL cu Glyphhanger.
- Cum îți dai seama când browserul folosește caractere aldine / cursive? faux-pas.