web font loading recipes
1.0.0
Eine Reihe von Demos für verschiedene Web -Schriftladungsstrategien. Einige davon sind in einem umfassenden Leitfaden für Schriftladungsstrategien enthalten, von denen einige experimenteller sind.
Demos werden unter https://www.zachleat.com/web-fonts/demos/ gehostet
Da Web -Schriftarten eine progressive Verbesserung sind und mit zunehmender Unterstützung für die CSS -Schriftart -API eine Zeit auf eine Zeit freuen, in der wir keine Polyfill in den Kopfzeile einführen müssen (für noch schnellere Schriftladung). Die vereinfachten CSS -Schriftart -Lade -API -Rezepte sind die Standardeinstellungen, aber polyfüllte Versionen sind für den breiteren Browserunterstützung enthalten - nicht nur in den polyfüllten Versionen werden Web -Schriftarten in Internet Explorer- und Edge -Webbrowsern angezeigt (die keine Unterstützung für die CSS -Schriftladung von API haben).
font-display: swap@font-face Deskriptorpreload<link> Tagfont-display: swap Mit preload tauschen<link> Tag und CSS : @font-face -Deskriptorfont-display und preloadÄhnlich wie oben, jedoch ohne eine Klasse - nur die CSS -Schriftart -Lade -API. Dies erfordert keine Änderung des CSS, injiziert die Web -Schriftarten mit JS programmgesteuert. Ich habe diese Methode zum ersten Mal im WebFont -Handbuch von @bramstein gesehen.
.style.fontFamily -Methode (funktioniert nur gut mit einer Familie pro Seite), sah dies zunächst in einem Tweet von @sizevidasZwei-Stufe Last unter Verwendung einer römischen Schriftart in der ersten Stufe (mit Schriftsynthese).
preload<link> Tag und JavaScript : CSS -Schriftart -Lade -APIfont-display: optional mit JavaScript.preload , mit einem Polyfill-Fallback, der font-display: optional<link> Tag und JavaScript : CSS -Schriftart -API und FontfaceObserver PolyfillDies sind nicht unbedingt für sich selbst Schriftladungsstrategien, aber sie sind zusätzliche Verbesserungen, die Sie über vorhandene Strategien lagern und sie kombinieren können.
Lösen Sie die Web -Schriftarten auf langsame Verbindungsgeschwindigkeiten.
prefers-reduced-motion Deaktivieren Sie von Web -Schriftarten, wenn der Benutzer die Präferenz Reduce Motion kann.
save-data -Benutzerpräferenz Deaktivieren Sie von Web -Schriftarten, wenn der Benutzer Data Saver -Modus aktiviert hat.
Sie werden wahrscheinlich irgendwann Blog -Beiträge dazu sehen.
font-display: optionalKomm schon. ?
Alte Browser rendern Foit ohne Auszeit, was in der Praxis Web -Schriftarten zu einem einzigen Ausfallpunkt machte. Die Verwendung von WOFF2 schneidet den Senf nur auf moderne Browser mit einer Zeitüberschreitung von drei Sekunden für Web -Schriftarten. Wir sind hier anti-unsichtbarer Text, aber dieser Ansatz ist erwähnenswert.
font-synthesis ist kein gutes Endprodukt.
<style> Injektion Alles, was JavaScript verwendet, um einen neuen <style> mit @font-face Blöcken im Inneren zu injizieren. Wirklich schlechte Repaintkosten - vermeiden Sie dies. Dies wird in der obigen asynchronen Daten-URI-Methode verwendet, ist aber auch bei Methoden mit schlechter Leistung häufig.
font-display: optional und preloadpreload mit font-display: optional ist ein Anti-Musterfont-display (Mischung von font-display in einer font-family )Diese Methode bietet derzeit keine Cross-Browser-Unterstützung. Ich hoffe, dass sich dies ändern wird - lerne mehr.
swap / 3 optional ) Dies ist eine übliche Sache, die Menschen versuchen - sie laden asynchron die CSS (und nur das CSS). Heck, ich habe dieses Verhalten verwendet, bevor ich anfing, Web -Schriftart zu studieren.
@supports und font-displayfont-display fout könnenfont-display nicht unterstützt wird (und ohne JS-Abhängigkeiten gut funktionieren)@supports funktioniert nicht mit Schriftartendeskriptoren.font-family Stack Geben Sie zwei oder mehr font-family Web-Schriftarten in einen einzelnen font-family ein.
Fehlgeschlagen : Der Schriftalgorithmus für Schriftarten wählt die erste Web -Schriftart aus, die übereinstimmt und versucht, ihn zu laden (ignoriert nachfolgende Web -Schriftfäfchen). Auch wenn Sie die erste Stufe preload , wird sie aufgrund der Priorität font-family umgetauscht.
Code
Demo
UPDATE : Während Sie das obige Problem mit font-display mildern können und möglicherweise die Reihenfolge der font-family Stack- und @font-face Block-Bestellung ändern können, gibt es immer noch Probleme beim Entfernen der unnötigen Subset-Web-Schriftart von der Seite, nachdem die größere Version geladen wurde. Schriftart Merkmale, die mit Glyphen auftreten, die diese Schriftart -Dateigrenzen überschreiten, werden unterbrochen (Kerning, Ligaturen und Cetera). In Bezug auf die CSS-gepaarte FontFace Objekt können Sie mit der CSS-Schriftlast-API (gemäß der Spezifikation) nicht entfernen.
** Beachten Sie, dass diese Methoden im Internet Explorer und Edge eintreten, indem sie ihr Standard -Schriftladungsverhalten nutzen.
