font-display

Die `font-display`-Eigenschaft definiert, wie Schriftdateien vom Browser geladen und angezeigt werden. Sie wird auf die `@font-face`-Regel angewendet, die benutzerdefinierte Schriftarten in einem Stylesheet definiert.

@font-face {
  font-family: 'MyWebFont'; /* Define the custom font name */
  src:  url('myfont.woff2') format('woff2'),
        url('myfont.woff') format('woff'); /* Define where the font can be downloaded */
  font-display: fallback; /* Define how the browser behaves during download */
}

Werte

Die `font-display`-Eigenschaft akzeptiert fünf Werte

• auto (Standard): Ermöglicht dem Browser, seine Standardmethode zum Laden zu verwenden, die meist dem Wert `block` ähnelt.
• block: Weist den Browser an, den Text kurzzeitig auszublenden, bis die Schriftart vollständig heruntergeladen ist. Genauer gesagt, zeichnet der Browser den Text mit einem unsichtbaren Platzhalter und tauscht ihn dann gegen die benutzerdefinierte Schriftart aus, sobald diese geladen ist. Dies ist auch bekannt als „Flash of Invisible Text“ oder FOIT.
• swap: Weist den Browser an, die Fallback-Schriftart zur Anzeige des Textes zu verwenden, bis die benutzerdefinierte Schriftart vollständig heruntergeladen ist. Dies ist auch bekannt als „Flash of Unstyled Text“ oder FOUT.
• fallback: Fungiert als Kompromiss zwischen den Werten `auto` und `swap`. Der Browser blendet den Text für etwa 100 ms aus und verwendet, wenn die Schriftart noch nicht heruntergeladen wurde, den Fallback-Text. Er wechselt zur neuen Schriftart, nachdem diese heruntergeladen wurde, jedoch nur während einer kurzen Wechselperiode (wahrscheinlich 3 Sekunden).
• optional: Ähnlich wie `fallback` weist dieser Wert den Browser an, den Text zunächst auszublenden und dann zu einer Fallback-Schriftart zu wechseln, bis die benutzerdefinierte Schriftart verfügbar ist. Dieser Wert erlaubt es dem Browser jedoch auch zu entscheiden, ob die benutzerdefinierte Schriftart überhaupt verwendet wird, wobei die Verbindungsgeschwindigkeit des Benutzers als entscheidender Faktor dient, wobei langsamere Verbindungen die benutzerdefinierte Schriftart seltener erhalten.

Hier ist eine andere Art, sie zu betrachten

	Blockierperiode	Wechselperiode
block	Kurz	Unendlich
swap	Keine	Unendlich
fallback	Extrem kurz	Kurz
optional	Extrem kurz	Keine

Warum wir font-display brauchen

Bevor es eine breite Unterstützung für `@font-face` gab, war unser typografisches Arsenal auf lokale Schriftarten beschränkt, bei denen nur die auf dem Computer des Endbenutzers vorinstallierten Schriftarten verfügbar waren. Wir nennen diese „websicheren“ Schriftarten, da der Browser nichts herunterladen muss, damit sie gerendert werden.

Dann kam die `@font-face`-Regel, die Webdesignern und Frontend-Entwicklern nie dagewesene neue typografische Möglichkeiten bot. Sie erlaubte uns, Schriftdateien auf einen Server hochzuladen und eine Reihe von Regeln in unseren Stylesheets zu schreiben, die die Schriftart benennen und dem Browser sagen, wo er die Dateien herunterladen soll. Sie brachte auch Dienste wie Google Fonts hervor, die benutzerdefinierte Schriftarten für die Massen zugänglich machten. Endlich war eine große Hürde, die Webdesign von Printdesign trennte, gefallen!

Allerdings hatten und haben benutzerdefinierte Schriftarten ihren Preis. Schriftdateien können groß sein und die zusätzliche Zeit für den Download der Dateien kann die Leistung einer Website verlangsamen, insbesondere für Geräte mit langsamer Netzwerkverbindung. Die zusätzlichen Kosten für Benutzer mit begrenzten Datentarifen wurden ebenfalls zu einem Faktor.

Ein weiteres besonderes Problem, das mit benutzerdefinierten Schriftarten auftrat, war das, was man als „Flash of Unstyled Text“ oder kurz FOUT bezeichnete. Browser zeigten standardmäßig eine Systemschriftart an, während sie auf den Download der benutzerdefinierten Schriftart warteten. Dies ermöglichte ein schnelleres Laden von Webseiten, weckte jedoch Bedenken bei Webdesignern, die dies als Übergriff auf die Benutzererfahrung und als Falschdarstellung des beabsichtigten Designs betrachteten. Moderne Webbrowser blenden den Text im Allgemeinen aus, bis die benutzerdefinierte Schriftart heruntergeladen ist, was wir jetzt als „Flash of Invisible Text“ oder FOIT bezeichnen.

Weder FOUT noch FOIT ist ideal. Wir haben Möglichkeiten zur Optimierung der Leistung benutzerdefinierter Schriftarten, um die Auswirkungen zu mildern. Jetzt haben wir jedoch `font-display`, um dem Browser mitzuteilen, ob wir FOUT, FOIT oder sogar etwas dazwischen bevorzugen.

Testen der Unterstützung

Interessante Anmerkung von Šime Vidas

CSS `font-display` ist ein `@font-face`-Deskriptor und keine Eigenschaft, daher kann seine Unterstützung im Browser nicht mit Feature-Queries (CSS `@supports`-Regel und CSS.supports-API) getestet werden.

Weitere Informationen

• CSS Font Rendering Controls Module Level 1 Specification: Ein Entwurf der Spezifikation für die Eigenschaft.
• font-display für die Massen: Jeremy Wagner stellte uns die Eigenschaft hier auf CSS-Tricks vor.
• Verwenden von @font-face: Eine umfassende Erklärung der Regel und bewährte Praktiken für deren Verwendung.
• System Font Stack: Ein Snippet, um benutzerdefinierte Schriftarten ganz zu vermeiden und sich ausschließlich auf die Systemschriftarten eines Benutzers zu verlassen.
• Steuerung der Schriftleistung mit font-display: Ein hervorragender Artikel zu diesem Thema von Google.

Browser-Unterstützung