font-display-CSS-At-Regel-Deskriptor
Baseline
Weitgehend verfügbar
Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Januar 2020 browserübergreifend verfügbar.
Der font-display-Deskriptor für die @font-face-At-Regel bestimmt, wie eine Schriftart dargestellt wird, abhängig davon, 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 Strategie zur Darstellung der Schriftart wird durch den User-Agent definiert.
block-
Gibt der Schriftart eine kurze Blockierungsperiode und eine unbegrenzte Austauschperiode.
swap-
Gibt der Schriftart eine äußerst kurze Blockierungsperiode und eine unbegrenzte Austauschperiode.
fallback-
Gibt der Schriftart eine äußerst kurze Blockierungsperiode und eine kurze Austauschperiode.
optional-
Gibt der Schriftart eine äußerst kurze Blockierungsperiode und keine Austauschperiode.
Hinweis:
In Firefox geben die Einstellungen gfx.downloadable_fonts.fallback_delay
und gfx.downloadable_fonts.fallback_delay_short jeweils die Dauer
der „kurzen“ und „äußerst kurzen“ Perioden an.
Beschreibung
Die Zeitleiste für die Schriftdarstellung basiert auf einem Timer, der beginnt, sobald der User-Agent versucht, eine bestimmte heruntergeladene Schriftart zu verwenden. Die Zeitleiste ist in die folgenden drei Perioden unterteilt, die das Rendering-Verhalten aller Elemente bestimmen, welche die Schriftart verwenden:
- Schrift-Blockierungsperiode: Wenn die Schriftart nicht geladen ist, muss jedes Element, das versucht, sie zu verwenden, eine unsichtbare Fallback-Schriftart rendern. Wenn die Schriftart während dieser Periode erfolgreich geladen wird, wird sie normal verwendet.
- Schrift-Austauschperiode: Wenn die Schriftart nicht geladen ist, muss jedes Element, das versucht, sie zu verwenden, eine Fallback-Schriftart rendern. Wenn die Schriftart während dieser Periode erfolgreich geladen wird, wird sie normal verwendet.
- Schriftfehlerperiode: Wenn die Schriftart nicht geladen ist, behandelt der User-Agent dies als fehlgeschlagenes Laden, was zu einem normalen Schrift-Fallback 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
Fallback-font-display angeben
@font-face {
font-family: "ExampleFont";
src: url("/path/to/fonts/example-font.woff2") format("woff2");
font-weight: normal;
font-style: normal;
font-display: fallback;
}
Spezifikationen
| Spezifikation |
|---|
| CSS Fonts Module Level 4 # font-display-desc |