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 eine Schriftart angezeigt wird, basierend darauf, ob und wann sie 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 vom Benutzeragenten festgelegt.
block-
Gibt der Schriftart eine kurze Blockperiode und eine unendliche Austauschperiode.
swap-
Gibt der Schriftart eine extrem kurze Blockperiode und eine unendliche Austauschperiode.
fallback-
Gibt der Schriftart eine extrem kurze Blockperiode und eine kurze Austauschperiode.
optional-
Gibt der Schriftart eine extrem kurze Blockperiode und keine Austauschperiode.
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 Zeitablauf für die Schriftdarstellung basiert auf einem Timer, der startet, sobald der Benutzeragent versucht, eine heruntergeladene Schriftart zu verwenden. Der Zeitablauf ist in die drei unten aufgeführten Perioden unterteilt, die das Rendering-Verhalten von Elementen bestimmen, die die Schriftart verwenden:
- Schriftblockperiode: Wenn die Schriftart nicht geladen ist, muss jedes Element, das versucht, sie zu verwenden, eine unsichtbare Ersatzschriftart rendern. Wird die Schriftart während dieser Periode erfolgreich geladen, wird sie normal verwendet.
- Schriftaustauschperiode: Wenn die Schriftart nicht geladen ist, muss jedes Element, das versucht, sie zu verwenden, eine Ersatzschriftart rendern. Wird die Schriftart in dieser Periode erfolgreich geladen, wird sie normal verwendet.
- Schriftfehlerperiode: Wenn die Schriftart nicht geladen ist, behandelt der Benutzeragent dies als fehlgeschlagenes Laden und löst eine normale Schriftfallerback aus.
Formale Definition
| Zugehörige @-Regel | @font-face |
|---|---|
| Anfangswert | auto |
| Berechneter Wert | wie angegeben |
Formale Syntax
font-display =
auto |
block |
swap |
fallback |
optional
Beispiele
Festlegen der Rückfall-Schriftanzeige
@font-face {
font-family: ExampleFont;
src:
url("/path/to/fonts/example-font.woff") format("woff"),
url("/path/to/fonts/example-font.eot") format("eot");
font-weight: 400;
font-style: normal;
font-display: fallback;
}
Spezifikationen
| Specification |
|---|
| CSS Fonts Module Level 4 # font-display-desc |
Browser-Kompatibilität
Loading…