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 @-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 Strategie für die Schriftdarstellung wird durch den Benutzeragenten definiert.
block-
Gibt dem Schriftschnitt eine kurze Blockperiode und eine unendliche Austauschperiode.
swap-
Gibt dem Schriftschnitt eine extrem kurze Blockperiode und eine unendliche Austauschperiode.
fallback-
Gibt dem Schriftschnitt eine extrem kurze Blockperiode und eine kurze Austauschperiode.
optional-
Gibt dem Schriftschnitt eine extrem kurze Blockperiode und keine Austauschperiode.
Hinweis:
In Firefox legen die Einstellungen gfx.downloadable_fonts.fallback_delay
und gfx.downloadable_fonts.fallback_delay_short die Dauer der "kurzen" bzw. "extrem kurzen" Perioden fest.
Beschreibung
Die Zeitleiste für die Schriftanzeige basiert auf einem Timer, der ab dem Moment startet, in dem der Benutzeragent versucht, einen gegebenen heruntergeladenen Schriftschnitt zu verwenden. Die Zeitleiste ist in die drei unten aufgeführten Perioden unterteilt, die das Renderverhalten von Elementen bestimmen, die den Schriftschnitt verwenden:
- Schriftblockperiode: Wenn der Schriftschnitt nicht geladen ist, muss jedes Element, das versucht, ihn zu verwenden, eine unsichtbare Ersatzschriftart rendern. Wenn der Schriftschnitt während dieser Periode erfolgreich geladen wird, wird er normal verwendet.
- Schriftauswechselperiode: Wenn der Schriftschnitt nicht geladen ist, muss jedes Element, das versucht, ihn zu verwenden, eine Ersatzschriftart rendern. Wenn der Schriftschnitt während dieser Periode erfolgreich geladen wird, wird er normal verwendet.
- Schriftfehlerperiode: Wird der Schriftschnitt nicht geladen, behandelt der Benutzeragent ihn als fehlgeschlagenen Ladevorgang und führt den normalen Schriftersatz aus.
Formale Definition
Wert in der Datenbank nicht gefunden!Formale Syntax
font-display =
auto |
block |
swap |
fallback |
optional
Beispiele
Fallback font-display angeben
@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 |
Browser-Kompatibilität
Loading…