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.
Der font-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
/* 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 Einstellungen gfx.downloadable_fonts.fallback_delay
und gfx.downloadable_fonts.fallback_delay_short die Dauer der "kurzen" und "extrem kurzen" Perioden an.
Beschreibung
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, eine unsichtbare 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
@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;
}
Spezifikationen
| Specification |
|---|
| CSS Fonts Module Level 4 # font-display-desc |