CSS font-display-Eigenschaft

Der font-display-Deskriptor definiert, wie Schriftdateien vom Browser heruntergeladen und angezeigt werden. Dieser Deskriptor weist folgende Werte auf:

• auto
• block
• swap
• fallback
• optional

Die Typografie war früher auf lokale Schriftarten beschränkt, bei denen nur die als „web-safe“ bezeichneten Schriftarten verfügbar waren. Dann kam die @font-face-Regel, die es ermöglichte, Schriftdateien auf einen Server hochzuladen und Regeln zu definieren, die den Namen der Schriftart festlegen und dem Browser mitteilen, wo die Dateien heruntergeladen werden können. Dies führte zu Diensten, die die Verwendung benutzerdefinierter Schriftarten ermöglichten. Diese benutzerdefinierten Schriftdateien können jedoch groß sein und die Seitenladezeit erhöhen.

Ein weiteres Problem bestand im Zusammenhang mit FOUT („Flash of Unstyled Text“ / Aufblitzen ungestylten Texts). Browser zeigten eine Systemschriftart an, während die benutzerdefinierte Schriftart heruntergeladen wurde. Dies war ein Problem, da Webdesigner dies als Beeinträchtigung der Benutzererfahrung ansahen. Heute blenden Browser den Text üblicherweise aus, bis die benutzerdefinierte Schriftart geladen ist, was als FOIT („Flash of Invisible Text“ / Aufblitzen unsichtbaren Texts) bezeichnet wird.

Keine der oben genannten Methoden ist jedoch ideal. Stattdessen gibt es nun den font-display-Deskriptor, der dem Browser mitteilt, was wir bevorzugen: FOUT oder FOIT.

Startwert	auto
Gilt für	@font-face-Regel.
Vererbbar	Nein.
Animierbar	Nein.
Version	CSS Fonts Module Level 4
DOM-Syntax	object.style.fontDisplay = "swap";

Syntax

Syntax des CSS font-display Deskriptors

font-display: auto | block | swap | fallback | optional | initial | inherit;

Wie verwendet man die @font-face-Regel?

@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: optional;
}

Werte

Wert	Beschreibung
auto	Die Schriftanzeige wird vom Browser definiert.
block	Gibt eine kurze Blockierungszeit und eine unendliche Tauschzeit an.
swap	Weist der Schriftart eine sehr kurze Blockierungszeit und eine unendliche Tauschzeit zu.
fallback	Weist der Schriftart eine sehr kurze Blockierungszeit und eine kurze Tauschzeit zu.
optional	Weist der Schriftart eine sehr kurze Blockierungszeit und keine Tauschzeit zu.
initial	Legt fest, dass die Eigenschaft ihren Standardwert verwendet.
inherit	Erbt die Eigenschaft vom Elternelement.

Practice

What are the possible values for the CSS property 'font-display'?

blockautoswapfallbackoptionalnone