font-display

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since Januar 2020.

Derfont-display Deskriptor für die@font-face At-Regel bestimmt, wie ein Schriftschnitt angezeigt wird, basierend darauf, ob und wann er heruntergeladen und einsatzbereit ist.

Syntax

css

/* Keyword values */font-display: auto;font-display: block;font-display: swap;font-display: fallback;font-display: optional;

Werte

auto: Die Schriftanzeigestrategie wird durch den Benutzeragenten definiert.
block: Gibt dem Schriftschnitt eine kurze Blockperiode und eine unendliche Swap-Periode.
swap: Gibt dem Schriftschnitt eine extrem kurze Blockperiode und eine unendliche Swap-Periode.
fallback: Gibt dem Schriftschnitt eine extrem kurze Blockperiode und eine kurze Swap-Periode.
optional: Gibt dem Schriftschnitt eine extrem kurze Blockperiode und keine Swap-Periode.

Hinweis:In Firefox geben die Einstellungengfx.downloadable_fonts.fallback_delayundgfx.downloadable_fonts.fallback_delay_short die Dauer der "kurzen" und "extrem kurzen" Perioden an.

Der Schriftanzeige-Zeitstrahl basiert auf einem Timer, der in dem Moment beginnt, wenn der Benutzeragent versucht, einen bestimmten heruntergeladenen Schriftschnitt zu verwenden. Der Zeitstrahl ist in die drei unten genannten Perioden unterteilt, die das Renderverhalten von Elementen bestimmen, die den Schriftschnitt nutzen:

Schrift-Blockperiode: Wenn der Schriftschnitt nicht geladen ist, muss jedes Element, das ihn verwenden will, eineunsichtbare Ersatzschrift rendern. Wenn der Schriftschnitt während dieser Periode erfolgreich geladen wird, wird er normal verwendet.
Schrift-Swap-Periode: Wenn der Schriftschnitt nicht geladen ist, muss jedes Element, das ihn verwenden will, eine Ersatzschrift rendern. Wenn der Schriftschnitt während dieser Periode erfolgreich geladen wird, wird er normal verwendet.
Schrift-Fehlerperiode: Wenn der Schriftschnitt nicht geladen ist, behandelt der Benutzeragent ihn als fehlgeschlagenen Ladevorgang, was zum normalen Schriftfallback führt.

Formale Definition

Zugehörige@-Regel	`@font-face`
Anfangswert	`auto`
Berechneter Wert	wie angegeben

Formale Syntax

font-display =
auto|
block|
swap|
fallback|
optional

Beispiele

Spezifizieren von Fallback font-display

css

@font-face {  font-family: "ExampleFont";  src:    url("/path/to/fonts/example-font.woff") format("woff"),    url("/path/to/fonts/example-font.eot") format("embedded-opentype");  font-weight: normal;  font-style: normal;  font-display: fallback;}