Czas na kolejny screencast parowania! Tym razem mam Zacha Leathermana z Filament Group. Zach przeprowadził wiele badań, napisał i mówił o ładowaniu czcionek internetowych w ciągu ostatnich kilku lat. Ma na ten temat obszerny przewodnik!
Istnieją pewne problemy z domyślnym sposobem ładowania czcionek niestandardowych. Tak jak w przypadku, po prostu łącząc czcionkę w niektórych CSS przez @ font-face. Nawet sposób, w jaki Google Fonts zapewnia użycie ich czcionek, Zach nazywa anty-wzorcem (ostatecznie jest to po prostu vanilla @ font-face). Różne przeglądarki robią różne rzeczy z @ font-face. Na przykład niektóre wersje Safari sprawiają, że czcionka ustawiona w niestandardowej czcionce jest niewidoczna do czasu jej załadowania, ale nie ma limitu czasu, więc jeśli czcionka zawiedzie z jakiegokolwiek powodu, możesz znaleźć się w najgorszym możliwym scenariuszu: na zawsze niewidoczny tekst Strona.
Nie masz dużej kontroli nad tym, jak ładują się czcionki @ font-face, chyba że weźmiesz sprawy w swoje ręce. Oznacza to takie rzeczy, jak: wstawianie czcionki, dzielenie czcionki na podzbiory (za pomocą „krytycznego” zestawu glifów lub przynajmniej redukcja glifów do używanego języka), używanie programów ładujących czcionki do określania, kiedy czcionki są ładowane i zmienianie klas, aby ich używać . Ten ostatni jest szczególnie interesujący. Sprawując kontrolę nad ładowaniem czcionek, musisz nie tylko radzić sobie z tym, kiedy / jak przeglądarka ładuje CSS zawierający @ font-face, ale także kiedy / w jaki sposób przeglądarka napotyka elementy tekstowe, które mają używać tych czcionek. Czcionki, które nie są używane, nie są pobierane. Czasami więc procedura polega na zmuszeniu ich do pobrania, czekaniu na pobranie, a następnie zastosowaniu klas, aby faktycznie z nich korzystać.
Niektóre narzędzia, którym przyjrzeliśmy się:
- Firefox DevTools lepiej sprawdzał używane czcionki
- Podział czcionek można wykonać w generatorze Font Squirrel lub Font Prep.
- Jakie glify podzbirujesz? Przetestuj to, czego potrzebujesz, pod określonymi adresami URL za pomocą Glyphhanger.
- Po czym poznać, że przeglądarka używa fałszywego pogrubienia / kursywy? gafa.