Web-Schriftoptimierung: Dateigrößenvorteile und Ladestrategien für die Konvertierung von TTF zu WOFF2
Die Konvertierung von TTF/OTF zu WOFF2 reduziert die Dateigröße um ungefähr 30 % im Vergleich zu WOFF und um 50 % im Vergleich zu unkomprimiertem TTF. In Kombination mit korrekten Strategien kann sie die Ladeperformance von Webseiten optimieren.
Aktualisiert 2026-08-11
Kompressionsvorteile von WOFF2 bei der Dateigröße
WOFF2 verwendet den Brotli-Kompressionsalgorithmus. Im Vergleich zu WOFF, das gzip-Kompression verwendet, reduziert WOFF2 die Dateigröße um ungefähr 30 %, und im Vergleich zu unkomprimierten rohen TTF/OTF-Schriften reduziert es die Dateigröße um ungefähr 50 %.
Die Größenkompression verringert direkt die Menge an Schriftdaten, die beim Laden einer Webseite übertragen werden, senkt den Bandbreitenverbrauch und verkürzt die Zeit zum Abschluss des Ladens von First-Screen-Ressourcen. Dies ist besonders geeignet für den Seitenzugriff über mobile Netzwerkumgebungen.
Browserunterstützung für WOFF2
Alle großen Desktop- und Mobilbrowser, die nach 2016 veröffentlicht wurden, unterstützen das WOFF2-Format nativ, es ist keine zusätzliche Kompatibilitätsbehandlung erforderlich.
Die Startversionen der WOFF2-Unterstützung für verschiedene Browser sind in der folgenden Tabelle aufgeführt. Alle aktuellen gängigen Browserversionen unterstützen dieses Format, sodass es sicher in Produktionsumgebungen verwendet werden kann.
| Browser | Erste Version mit nativer WOFF2-Unterstützung |
|---|---|
| Chrome | Chrome 48 (veröffentlicht Januar 2016) |
| Firefox | Firefox 44 (veröffentlicht Januar 2016) |
| Safari | Safari 10 (veröffentlicht September 2016) |
| Edge | Edge 14 (veröffentlicht August 2016) |
Zusammenarbeitsschema von @font-face und Subsetting
Bei der Verwendung von WOFF2-Schriften muss die Schrift über die @font-face-Regel in CSS deklariert werden, und dem WOFF2-Format wird die höchste Priorität im src-Attribut zugewiesen.
Die Kombination mit dem unicode-range-Attribut ermöglicht Font-Subsetting. Jede @font-face entspricht einem Unicode-Bereich, und der Browser lädt nur den Schriftteilmengen, die für den aktuellen Seiteninhalt benötigt wird, wodurch überflüssiger Ressourcenaufruf reduziert wird.
Schlüsselpunkte für Schriftwiedergabe und CJK-Schriftoptimierung
In CSS muss für @font-face font-display: swap deklariert werden. Diese Eigenschaft erlaubt dem Browser, Text vor dem Abschluss des Ladens der WOFF2-Schrift mit der Standardsystemschrift anzuzeigen, wodurch leere Textblöcke im ersten Bildschirm vermieden und sichergestellt wird, dass der Inhalt des ersten Bildschirms normal gelesen werden kann.
CJK-Schriften (Chinesisch, Japanisch, Koreanisch) enthalten tausende bis zehntausende Zeichen, die volle Dateigröße kann mehrere MB bis mehr als zehn MB betragen. Über Subsetting müssen die für die Seite benötigten Zeichen extrahiert werden, um die einzelne Dateigröße in einem vernünftigen Bereich zu halten und die Ladeperformance sicherzustellen.
Häufige Fragen
Muss ich die alten Formate WOFF oder TTF als Fallbacks behalten?
Seiten, die auf durchschnittliche Nutzer ausgerichtet sind, können nur WOFF2 behalten. Wenn alte Browser unterstützt werden müssen, die vor 2016 veröffentlicht wurden, kann WOFF als Fallback-Format im @font-face src-Attribut angehängt werden, abhängig von den offiziellen öffentlichen Informationen der Website.
Ist das Konvertierungsergebnis des Online-Tools für TTF zu WOFF2 konform?
Konforme Konvertierungswerkzeuge folgen der WOFF2-Formatspezifikation. Das von OKfmt bereitgestellte TTF/OTF zu WOFF2-Tool erzeugt Dateien, die dem Standard entsprechen und direkt in Produktionsumgebungen verwendet werden können.
Brauchen nicht-chinesische Schriften ein Subsetting?
Westliche Zeichensätze haben eine kleine native Größe, die volle Größe liegt generell im Bereich von 100KB bis 300KB. Wenn nur gebräuchliche Zeichen verwendet werden, kann auch ein Subsetting durchgeführt werden, um die Größe weiter zu reduzieren und die Ladezeit zu verkürzen.