Optimierung von Webschriften für die Leistung: Der Stand der Technik

Dieser Artikel ist ein SiteGround -Partnerschaftsbeitrag. Vielen Dank, dass Sie unsere Sponsoren unterstützt haben.

siebenundsechzig Prozent der Websites verwenden jetzt benutzerdefinierte Web-Schriftarten. Diese weit verbreitete Akzeptanz stellt jedoch Herausforderungen der Leistung und Benutzererfahrung dar. Dieser Artikel untersucht gemeinsame Fallstricke in der Implementierung von Web-Schriftarten und bietet Lösungen, einschließlich etablierter Problemumgehungen und zukunftssicherer Standards.

Schlüsselpunkte:

• benutzerdefinierte Web -Schriftarten, die auf 67% der Websites verwendet werden, können aufgrund ihrer Größe und Ladezeiten negativ auf die Leistung und die Benutzererfahrung auswirken, was möglicherweise einen Blitz von Invisible Text (FOIT) verursacht.
• Optimieren benutzerdefinierte Schriftarten beinhalten die Minimierung von Schriften, mithilfe von Browser-kompatiblen Formaten (Priorisierung von WOFF2), Laden nur notwendige Stile und begrenzende Zeichensätze.
• Um foit zu bekämpfen, die Verwendung von Systemschriften zu verwenden, den Web -Schriftlader für asynchrone Laden zu verwenden oder die CSS -Schriftart -Lade -API für die körnige Steuerung zu nutzen.
• Die CSS font-display -Spertage bietet erweiterte Schriftladungsverwaltung, obwohl der Browser-Support unvollständig bleibt.
• Während der Blitz des nicht styierten Textes (FOUT) bestehen könnte, kann der Einfluss reduziert werden, indem Fallback-Schriftarten (X-Höhe und Breite) mit der benutzerdefinierten Schriftart ausgerichtet werden.

Der Verschluss von benutzerdefinierten Webschriften:

Website -Besucher priorisieren Inhalte. Eine außergewöhnliche Typografie ist daher für Lesbarkeit, Lesbarkeit und Markenidentität von wesentlicher Bedeutung. Benutzerdefinierte Web-Schriftarten-fällt auf Benutzergeräte nicht vorinstalliert-überlegen überlegene typografische Design. Während die CSS @font-face -Regel eine weit verbreitete Akzeptanz ermöglicht hat, kann die inhärente Größe der Schriftartdateien die Leistung der Website beeinflussen. Effiziente Schriftlast ist von größter Bedeutung.

Verständnis des Blitzes des unsichtbaren Textes (foit):

Die typische Methode zur Verwendung benutzerdefinierter Schriftarten, die sie über CSS @font-face definieren und sich auf das Standard -Browserverhalten stützen - ist suboptimal. Browser verzögern häufig das Laden der Schriftarten, bis die CSS -Parsen abgeschlossen ist. Darüber hinaus erfordern Zach -Leatherman -Downloads, wie Zach Leatherman hervorgeht, bestimmte Bedingungen:

• Ein HTML -Element unter Verwendung des angegebenen font-family.
• In Webkit- und Blink -Browsern darf das Element nicht leer sein.
• Für Browser, die Unicode -Bereichsdeskriptoren unterstützen, muss der Inhalt mit dem angegebenen Bereich übereinstimmen.

Dieser verzögerte Download führt häufig zu FOIT: Text Unsichtbarkeit, bis die Schriftart lädt. Die Browserhandhabung von FOIT variiert:

• Blink und Firefox verwenden ein Timeout von drei Sekunden; Wenn die Schriftart nicht geladen wird, wird eine Fallback -Schriftart angezeigt, die möglicherweise zu Fout führt (Blitz des nicht styierten Textes).
• safari, androids Standardbrowser und Blackberry Zeigen Sie keinen Text an, bis die Schriftart geladen wird.
IE/Edge Zeigen Sie die Fallback-Schriftart direkt an, einen benutzerfreundlicheren Ansatz.

Während Fout weniger störend ist als Foit, sollten beide vermieden werden. Viele Experten betrachten Fout jedoch für Foit.

Optimieren benutzerdefinierte Schriftart Dateien:

Mehrere Strategien minimieren Schriftdateigröße:

1. minimieren Sie Schriften: Verwenden Sie eine kleine Anzahl sorgfältig ausgewählter Schriftarten.

2. Browser-kompatible Formate:

   Priorisieren Sie WOFF2 und fällt auf den WOFF zurück. Beispiel:

   <code class="language-css">@font-face {
     font-family: 'Open Sans';
     src: local('Open Sans'), local('OpenSans'),
          url('fonts/open-sans.woff2') format('woff2'),
          url('fonts/open-sans.woff') format('woff');
   }</code>

3. Nur notwendige Stile laden:

   Vermeiden Sie nicht verwendete Schriftart (kursiv, fett usw.).

4. Untergrundzeichen -Zeichensätze:

   Geben Sie nur die auf Ihrer Seite verwendeten Zeichen ein. (Siehe Dudley Storeys "Slash -Seiten -Ladezeiten mit CSS -Schriftarten" für Details).

adressieren Sie:

verschiedene Methoden mildern foit:

1. Vermeiden Sie benutzerdefinierte Schriftarten (Fallback an Systemschriften):

   Ein einfaches, wenn auch weniger ästhetisch ansprechender Lösung besteht darin, sich ausschließlich auf Systemschriften zu verlassen. Beispiel:

   <code class="language-css">body {
     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
   }</code>

2. Web -Schriftlader:

   Diese JavaScript -Bibliothek lädt asynchron Schriftarten und zeigt Fallbacks an, bis die benutzerdefinierte Schriftart verfügbar ist.

3. CSS-Schriftart-Lade-API:

   Diese Standard-API bietet eine feinkörnige Steuerung über die Schriftladung, sodass die Verwendung von Systemschriften bis zur Vorlage benutzerdefinierter Schriftarten ermöglicht wird. (Siehe Manuel Matuzovics "Erste Schritte mit CSS -Schriftart" für ein Tutorial).

Die Zukunft: CSS

: font-display Die CSS

-Mobilie bietet eine granulare Kontrolle über Schriftladung und Fallback -Verhalten. Die Werte umfassen

, font-display, auto, block und swap. Während die Browser -Unterstützung immer noch begrenzt ist, repräsentiert er die Zukunft des Ladens der Webschrift. fallback optional

mildern Fout:

Während die oben genannten Methoden für Foit adressieren, kann Fout noch auftreten. Bei der Minimierung des Auswirkungens beinhaltet die Übereinstimmung mit der X-Höhe und der Breite der Fallback-Schriftart mit den Abmessungen der benutzerdefinierten Schriftarten mit Tools wie Monica Dinculescu's Font Style Match.

Schlussfolgerung:

Effizientes Web -Schriftart -Management erfordert die Optimierung der Dateigröße und das Steuerungsverhalten der Schriftart. Die hier diskutierten Methoden sowie die bereitgestellten Ressourcen bieten effektive Lösungen für die Verbesserung der Website und der Benutzererfahrung.

häufig gestellte Fragen (FAQs):

(Der FAQS-Abschnitt aus der ursprünglichen Eingabe ist bereits gut geschrieben und erfordert keine signifikante Modifikation für diese Umschreibung.) Der ursprüngliche FAQ-Abschnitt wird wie folgt beibehalten.

Das obige ist der detaillierte Inhalt vonOptimierung von Webschriften für die Leistung: Der Stand der Technik. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!