Die besten Schriftladungsstrategien der Schriftart und wie man sie ausführt

Mastering -Web -Schriftladungsstrategien: Ein praktischer Leitfaden

Der umfassende Leitfaden von Zach Leathermans für Schriftladungsstrategien war eine wertvolle Ressource für Webentwickler. Die schiere Anzahl von Optionen kann jedoch überwältigend sein. Dieser Artikel vereinfacht die besten Ansätze und konzentriert sich auf Praktikabilität und Ausführung.

Schlüsselstrategien:

Leatherman Champions zwei Hauptstrategien:

1. Fout with Klasse: Ein vielseitiger Ansatz, der für die meisten Szenarien geeignet ist, unabhängig davon, ob Schriftarten selbst gehostet werden oder einen Schriftart-Hosting-Service nutzen.
2. Kritischer Foot: Die leistungsstärkste Option, aber auf selbst gehostete Schriftarten beschränkt.

Bevor Sie sich mit diesen befassen, klären wir die Terminologie:

• FOIT (Blitz des unsichtbaren Textes): Der Text ist versteckt, bis die Web -Schriftart geladen wird.
• FOUT (Flash of Unruhled Text): Zunächst wird eine Systemschrift angezeigt und dann durch die Web -Schriftart ersetzt.
• Foft (Flash of Faux Text): Eine komplexere Methode, bei der zuerst die römische Schriftart und dann andere Stile geladen werden.

Schriftart -Hosting -Optionen:

1. Cloud -Anbieter (z. B. Google -Schriftarten, Adobe -Schriftarten): Im Allgemeinen leichter zu implementieren, aber aufgrund des Blockierungsverhaltens oft weniger leistungsstark. Google Fonts ' display=swap -Parameter bietet eine leichte Verbesserung durch Aktivieren von Fout.

   <link href="https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,400;0,700;1,400;1,700&amp;display=swap" rel="stylesheet">

2. Selbsthosting: Erfordert Schriftart Lizenzen und beinhaltet die Verwendung @font-face und potenziell font-display: swap . Dies ermöglicht eine größere Kontrolle und Optimierung.

Selbst gehostete Schriftarten und Implementierung:

@font-face ermöglicht eine Schriftbezeichnung in CSS:

@font-face {
  Schriftfamilie: Lato;
  SRC: URL ('Path-to-lato.woff2') Format ('Woff2'),
       URL ('path-to-lato.woff') Format ('Woff');
  / * ... andere Gewichte und Stile ... */
}

html {
  Schriftfamilie: Lato, Sans-Serif;
}

font-display: swap Triggers Fout für selbst gehostete Schriftarten.

Fout mit Klasse (sowohl für Wolken als auch für selbst gehostete Schriftarten):

Diese Strategie verwendet JavaScript, um Schriftarten asynchron zu laden, Repainten zu gruppieren und sich an Benutzerpräferenzen anzupassen. Es ermöglicht auch das Laden von Schriftarten, wenn der Benutzer bereits über die Schriftart installiert ist.

1. Laden Sie Schriftarten normal (über<link> für Cloud-veranstaltete oder @font-face für sich selbst gehostete).

2. Verwenden<script> tag:</script>

   if ('fonts' in document) {
     Promise.all([
       document.fonts.load('1em Lato'),
       // ... other weights and styles ...
     ]).then(_ => {
       document.documentElement.classList.add('fonts-loaded');
     });
   }

3. Use CSS to style the text:

   body {
     font-family: sans-serif; /* System font */
   }
   
   .fonts-loaded body {
     font-family: Lato, sans-serif; /* Web font */
   }

4. Optimize for repeat visits using sessionStorage:

   if (sessionStorage.fontsLoaded) {
     document.documentElement.classList.add('fonts-loaded');
   } else {
     // ... font loading code ...
   }

FOFT (Flash of Faux Text):

This advanced technique loads the Roman font first, then other styles. "Critical FOFT" optimizes this by loading only essential characters initially. While offering performance gains, it's more complex to implement.

Choosing the Right Strategy:

• Cloud-Hosted, Simple: Use font-display: swap if provided by the host; otherwise, use FOUT with Class.
• Self-Hosted, Simple: @font-face font-display: swap is the easiest approach, especially for a small number of font files.
• Self-Hosted, Advanced: Consider Standard FOFT or Critical FOFT for performance optimization, especially with many font files.

This streamlined guide provides a clear path to choosing and implementing the optimal font loading strategy for your project. Remember to prioritize a JavaScript-free approach when feasible, particularly with limited font files.

Das obige ist der detaillierte Inhalt vonDie besten Schriftladungsstrategien der Schriftart und wie man sie ausführt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!