Tiefgreifendes Verständnis der CSS @font-face-Leistungsoptimierung

In diesem Artikel werden hauptsächlich allgemeine Strategien zur Optimierung des Ladens von Schriftarten vorgestellt. Der Großteil des Inhalts besteht aus Referenzen und Übersetzungen.

1. Grundlegende Verwendung von Font-Face

Ich glaube, jeder kennt die grundlegende Verwendung von Font-Face, die im Wesentlichen so aussieht:

@Schriftart {
	Schriftfamilie: Lato;
	Quelle: URL('font-lato/lato-regular-webfont.woff2') Format('woff2'),
		 URL('font-lato/lato-regular-webfont.woff') Format('woff'),
		 URL (Schriftart Lato/Lato-Regular-Webfont.ttf) Format („OpenType“);
}
p { Schriftfamilie: Lato, Serifen; }

Dadurch können unsere Webseiten benutzerdefinierte Schriftarten verwenden. Zusätzlich zu den Attributen „font-family“ und „src“ gibt es auch die Attribute „font-style“ und „font-weight“. src kann mehrere Schriftarten angeben, die der Reihe nach angewendet werden. Im obigen Beispiel wird beispielsweise zuerst die Schriftart woff2 geladen. Wenn dies fehlschlägt, wird die Schriftart woff geladen, andernfalls wird die Schriftart opentype geladen. Die von src unterstützten Schriftarten können folgende Typen sein:

Der src-Parameter kann in Anführungszeichen gesetzt werden oder nicht. Die Bedeutung des Parameters variiert je nach Format, beispielsweise wie folgt:

src: url(fonts/simple.woff); /* simple.woff laden, die Adresse ist relativ zur Stylesheet-Adresse*/
src: url(/fonts/simple.woff); /* Lade simple.woff, die Adresse ist die absolute Adresse der Website*/
src: url(fonts/coll.otc#foo); /* Schriftart „foo“ aus dem Zeichensatz „coll.otc“ laden */
src: url(fonts/coll.woff2#foo); /* Schriftart „foo“ aus dem Zeichensatz „coll.woff2“ laden */
src: url(fonts.svg#simple); /* Lade die SVG-Schriftart mit der ID „simple“ */

Die in src geladene Schriftartadresse unterliegt domänenübergreifenden Einschränkungen. Wenn Sie Schriftarten domänenübergreifend laden möchten, müssen Sie CORS festlegen.

Dies ist die grundlegendste Verwendung von Font-Face. Als nächstes werden wir die Verwendung von Schriftarten weiter analysieren und versuchen, Optimierungsstrategien zu finden.

2. Wann werden die Schriftarten heruntergeladen?

Oben ging es um die Grundkenntnisse zu Schriftarten, aber haben Sie schon einmal darüber nachgedacht, wann die Schriftarten heruntergeladen werden? Wenn wir in CSS nur die folgenden Stile definieren, werden die Schriftarten dann beim Laden der Seite automatisch heruntergeladen?

@Schriftart {
	Schriftfamilie: Lato;
	Quelle: URL('font-lato/lato-regular-webfont.woff2') Format('woff2'),
		 URL('font-lato/lato-regular-webfont.woff') Format('woff'),
		 URL (Schriftart Lato/Lato-Regular-Webfont.ttf) Format („OpenType“);
}

Leider werden die Schriftarten nicht heruntergeladen. Normalerweise wird die entsprechende Schriftart nur heruntergeladen, wenn unsere Seitenelemente die in Font-Face definierte Schriftart verwenden.

Hinweis: Wir bezeichnen dies als den Normalfall, da IE8 die Schriftart herunterlädt, sofern die Schriftart definiert ist, auch wenn das Seitenelement die entsprechende Schriftart nicht verwendet.

In anderen Browsern ist dies nicht der Fall.

Beispielsweise werden in Firefox und IE 9+ Schriftarten in den folgenden Situationen heruntergeladen:

html

<div id="test"></div>

CSS

#prüfen {
	Schriftfamilie: Lato;
}

Was ist das Besondere daran? Möglicherweise ist Ihnen aufgefallen, dass dieses Element zwar den Schriftstil „Font-Family: Lato“ verwendet, aber keinen Text enthält. ! ! . Gemäß unserer Idealvorstellung sollten Schriftarten nur heruntergeladen werden, wenn Textinhalte vorhanden sind. Dies ist das Verhalten der Browser Chrome, Safari (WebKit/Blink usw.).

Die Browser Chrome und Safari (WebKit/Blink usw.) laden Schriftarten nur in den folgenden Situationen herunter:

html

<div id="test">Hier ist Text</div>

CSS

#prüfen {
	Schriftfamilie: Lato;
}

Zusammenfassend lässt sich also sagen, dass unterschiedliche Browser die folgenden Strategien zum Herunterladen von Schriftarten haben:

• IE8 lädt die Schriftart herunter, sofern die Schriftart definiert ist, unabhängig davon, ob die Schriftart tatsächlich verwendet wird.
• Firefox, IE 9+ lädt die Schriftart nur herunter, wenn die Schriftart definiert ist und es auf der Seite Elemente gibt, die die Schriftart verwenden, unabhängig davon, ob das Element Textinhalte hat oder nicht.
• Chrome und Safari laden die Schriftart nur herunter, wenn die Schriftart definiert ist, die Seite über ein Element mit der angewendeten Schriftart verfügt und das Element Textinhalte hat.

Dann fragen Sie sich vielleicht: Was wäre, wenn unsere DOM-Elemente dynamisch eingefügt würden? Zum Beispiel:

var el = document.createElement('div');
el.style.fontFamily = "open_sansregular";
Dokument.body.appendChild(el);
el.innerHTML = 'Inhalt.';

Die Antwort ist die gleiche. Die Download-Strategie lautet wie folgt:

var el = document.createElement('div');
el.style.fontFamily = "open_sansregular";
/* An diesem Punkt beginnt IE8 mit dem Herunterladen von Schriftarten*/

Dokument.body.appendChild(el);
/* Nur hier, Firefox, IE 9+ beginnen mit dem Herunterladen von Schriftarten*/

el.innerHTML = 'Inhalt.';
/* Erst hier beginnen Chrome und Safari mit dem Herunterladen von Schriftarten*/

3. FOIT (Aufblitzen unsichtbaren Textes)

FOIT ist das Standardanzeigeformat des Browsers beim Laden von Schriftarten. Dies bedeutet, dass während des Ladevorgangs der Schriftart der Textinhalt auf der Seite nicht angezeigt wird. In modernen Browsern kann FOIT dazu führen, dass dies bis zu 3 Sekunden lang auftritt. FOIT führt zu einer negativen Benutzererfahrung, die wir so weit wie möglich vermeiden müssen.

4. FOUT (Flash of Unstyled Text) und Font-Display-Attribut

FOUT bedeutet, dass während des Ladevorgangs der Schrift die Standard-Systemschriftart verwendet wird. Nachdem die Schrift geladen wurde, wird die geladene Schrift angezeigt. Wenn die Schrift nicht innerhalb von FOIT (3s) geladen wird, wird weiterhin die Standard-Systemschriftart verwendet.

IE und Edge warten nicht, bis FOIT ein Timeout hat, bevor sie die Standardschriftart anzeigen. Sie zeigen die Standardschriftart sofort an. FOUT ist besser als FOIT, aber Sie müssen auf den dadurch verursachten Reflow achten.

Damit der Browser ein FOUT-Verhalten aufweist, müssen wir ihm beim Festlegen von @font-face: font-display ein Attribut hinzufügen. Der Standardwert von font-display ist auto. Die optionalen Attribute und ihre Bedeutungen sind wie folgt:

• auto. Die Schriftartanzeigerichtlinie wird vom Benutzeragenten definiert.
• Block. Gibt der Schriftart eine kurze Blockperiode (in den meisten Fällen werden 3 s empfohlen) und eine unendliche Austauschperiode.
• Swap. Gibt der Schriftart eine extrem kleine Blockperiode (in den meisten Fällen werden 100 ms oder weniger empfohlen) und eine unendliche Swapperiode.
• Fallback. Gibt der Schriftart eine extrem kleine Blockperiode (in den meisten Fällen werden 100 ms oder weniger empfohlen) und eine kurze Swap-Periode (in den meisten Fällen werden 3 s empfohlen).
• optional. Gibt der Schriftart eine extrem kleine Blockperiode (in den meisten Fällen werden 100 ms oder weniger empfohlen) und eine 0-Sekunden-Austauschperiode.

Im Allgemeinen kann es auf Fallback und optional eingestellt werden.

5. Vorspannung

Fügen Sie der Seite den folgenden Code hinzu, um die Schriftart schneller zu laden:

<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin>

Wird normalerweise mit der grundlegendsten Schriftart verwendet

6. Konvertieren Sie Schriftarten in BASE64URI

Diese Methode dient dazu, den Pfad beim Definieren der Schriftart in @font-face direkt in die Base64-Kodierung der Schriftart zu ändern.

Vorteile: Der Vorteil dieses Ansatzes besteht darin, dass FOIT und FOUT nicht auftreten. Es erfolgt also kein Neufluss und Neuanstrich. Nachteile: Die in Base64 konvertierte Schriftart ist außerdem sehr groß, was sich auf die anfängliche Ladegeschwindigkeit der Seite auswirkt. Das kommagetrennte Format zum Laden mehrerer Schriftformate wird nicht unterstützt. Es kann nur ein Schriftformat geladen werden. Dies bedeutet, dass Sie, um eine größtmögliche Kompatibilität mit allen Browsern sicherzustellen, normalerweise das Woff-Format angeben, da das Woff-Format eine gute Kompatibilität aufweist. Sie können jedoch nicht das kleinere Woff2-Format verwenden, da das Woff2-Format eine schlechte Kompatibilität aufweist.

7. Asynchrones Laden von URI-Schriftarten im BASE64-Format

Diese Methode fügt asynchron einen CSS-Link mit einer Schriftart-URI im BASE64-Format ein.

8. Verwenden Sie Font Load API + FOUT + Klassenwechsel

Bei dieser Methode wird die Klasse @font-face am Anfang nicht verwendet. Dann wird die gewünschte Schriftart mithilfe der Font Load API geladen und anschließend das entsprechende CSS gewechselt. Font Load API ist eine native API:

document.fonts.load('1em open_sansregular')
.dann(Funktion() {
	var docEl = Dokument.Dokumentelement;
	docEl.className += "open-sans-loaded";
});

.open-sans-loaded h1 {
	Schriftfamilie: open_sansregular;
}

Natürlich muss bei dieser Methode die Browserkompatibilität berücksichtigt werden.

9. FOFT (Flash of Faux Text)

FOFT teilt das Laden der Schriftarten in mehrere Teile auf. Dabei wird zuerst die römische Webschriftart geladen und anschließend wird die Eigenschaft „Font-Synthese“ verwendet, um die fetten und kursiven Varianten darzustellen, sobald die eigentlichen Fett- und Kursivschriften geladen sind.

Diese Methode basiert auf [使用Font Load API + FOUT + class切換] und eignet sich sehr gut zum Laden derselben Schriftart, aber mit unterschiedlichen Stärken und Stilen, wie z. B. Roman, Fett, Kursiv, Fett kursiv usw. Wir teilen diese Schriftarten in zwei Phasen auf: Die erste Phase ist die Antiqua-Schriftart, dann wird sofort die künstliche Fett- und Kursivschrift gerendert und schließlich (die zweite Phase) wird sie durch die echte Schriftart ersetzt. Sie können sessionStorage auch verwenden, um das Szenario des Zugriffs auf wiederholte Ansichten zu optimieren.

10. KRITISCHE FOFT

Der einzige Unterschied zwischen CRITICAL FOFT und Standard-FOFI ist das Laden von lateinischen Schriftarten im ersten Schritt. CRITICAL FOFT lädt nicht den gesamten Satz lateinischer Schriftarten, sondern nur eine Teilmenge davon (z. B. A-Za-z0-9). Der gesamte Satz wird im zweiten Schritt geladen.

11. KRITISCHES FOFT MIT DATEN-URI

Der einzige Unterschied zwischen diesem und CRITICAL FOFT besteht in der Art und Weise, wie die Schriftarten der römischen Teilmenge geladen werden. Das vorherige wurde mithilfe der Font Load API durchgeführt, aber hier werden die Schriftarten der römischen Teilmenge fest in eine BASE64-URI codiert und geladen.

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.