Zeit für einen weiteren Pairing-Screencast! Diesmal habe ich Zach Leatherman von der Filament Group. Zach hat in den letzten Jahren viel recherchiert, geschrieben und über das Laden von Web-Schriftarten gesprochen. Er hat eine umfassende Anleitung dazu!
Es gibt einige Probleme mit der Standardmethode zum Laden benutzerdefinierter Schriftarten. Wie in, einfach eine Schriftart in einem CSS über @ font-face verknüpfen. Sogar die Art und Weise, wie Google Fonts Ihnen die Verwendung ihrer Schriftarten bietet, nennt Zach ein Anti-Pattern (letztendlich ist es nur vanilla @ font-face). Verschiedene Browser machen unterschiedliche Dinge mit @ font-face. Beispielsweise machen einige Versionen von Safari den in einer benutzerdefinierten Schriftart festgelegten Typ unsichtbar, bis die Schriftart geladen wird, aber keine Zeitüberschreitung aufweist. Wenn die Schriftart aus irgendeinem Grund fehlschlägt, befinden Sie sich möglicherweise im schlimmsten Fall: für immer unsichtbarer Text aktiviert der Standort.
Sie haben nicht viel Kontrolle darüber, wie @ font-face-Schriftarten geladen werden, es sei denn, Sie nehmen die Angelegenheit selbst in die Hand. Das bedeutet Dinge wie: Inlinen der Schriftart, Untermenge der Schriftart (entweder mit einem „kritischen“ Satz von Glyphen oder zumindest Reduzieren von Glyphen auf die verwendete Sprache), Verwenden von Schriftladern, um zu bestimmen, wann die Schriftarten geladen werden, und Ändern von Klassen, um sie zu verwenden . Letzteres ist besonders interessant. Wenn Sie die Kontrolle über das Laden von Schriftarten ausüben, müssen Sie nicht nur festlegen, wann / wie der Browser das CSS lädt, das das @ font-face enthält, sondern auch, wann / wie der Browser auf Textelemente stößt, die angewiesen sind, diese Schriftarten zu verwenden. Nicht verwendete Schriftarten werden nicht heruntergeladen. Manchmal besteht das Verfahren darin, sie zum Herunterladen zu zwingen, auf den Download zu warten und dann Klassen anzuwenden, um sie tatsächlich zu verwenden.
Einige Tools, die wir uns angesehen haben:
- Firefox DevTools war besser geeignet, um verwendete Schriftarten zu betrachten
- Untermengen von Schriftarten können im Font Squirrel-Generator oder in Font Prep erstellt werden.
- Welche Glyphen unterteilen Sie? Testen Sie mit Glyphhanger, was Sie unter bestimmten URLs benötigen.
- Woran erkennt man, wenn der Browser faux fett / kursiv verwendet? Fauxpas.
