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 gebrauchsfertig ist.
Syntax
/* Keyword values */
font-display: auto;
font-display: block;
font-display: swap;
font-display: fallback;
font-display: optional;
Werte
auto-
Die Strategie zur Schriftanzeige wird vom Benutzeragenten definiert.
block-
Gibt dem Schriftschnitt eine kurze Blockperiode und eine unbegrenzte Austauschperiode.
swap-
Gibt dem Schriftschnitt eine extrem kurze Blockperiode und eine unbegrenzte 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, die Einstellungen gfx.downloadable_fonts.fallback_delay
und gfx.downloadable_fonts.fallback_delay_short geben die Dauer der
"kurzen" bzw. "extrem kurzen" Perioden an.
Beschreibung
Der Zeitablauf der Schriftanzeige basiert auf einem Timer, der ab dem Moment startet, in dem der Benutzeragent versucht, eine heruntergeladene Schriftart zu verwenden. Der Zeitablauf ist in die folgenden drei Perioden unterteilt, die das Anzeigeverhalten aller Elemente bestimmen, die die Schriftart verwenden:
- Schriftblockperiode: Ist die Schriftart nicht geladen, muss jedes Element, das versucht, sie zu verwenden, eine unsichtbare Fallback-Schriftart rendern. Wird die Schriftart während dieser Periode erfolgreich geladen, wird sie normal verwendet.
- Schriftaustauschperiode: Ist die Schriftart nicht geladen, muss jedes Element, das versucht, sie zu verwenden, eine Fallback-Schriftart rendern. Wird die Schriftart während dieser Periode erfolgreich geladen, wird sie normal verwendet.
- Schriftfehlerperiode: Ist die Schriftart nicht geladen, behandelt der Benutzeragent sie als fehlgeschlagenes Laden, was zu einem normalen Schriftersatz 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
Angabe von font-display als Fallback
@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: 400;
font-style: normal;
font-display: fallback;
}
Spezifikationen
| Specification |
|---|
| CSS Fonts Module Level 4 # font-display-desc |
Browser-Kompatibilität
Loading…