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 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 definiert.
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 Präferenzen gfx.downloadable_fonts.fallback_delay
und gfx.downloadable_fonts.fallback_delay_short die Dauer
der "kurzen" und "extrem kurzen" Perioden an.
Beschreibung
Der Zeitplan für die Schriftanzeige basiert auf einem Timer, der zu dem Zeitpunkt beginnt, an dem der Benutzeragent versucht, eine heruntergeladene Schriftart zu verwenden. Der Zeitplan ist in die drei unten genannten 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. Wenn die Schriftart während dieser Periode erfolgreich geladen wird, wird sie normal verwendet.
- Schrifttauschperiode: Wenn die Schriftart nicht geladen ist, muss jedes Element, das versucht, sie zu verwenden, eine Ersatzschriftart rendern. Wenn die Schriftart während dieser Periode erfolgreich geladen wird, wird sie normal verwendet.
- Schriftfehlerperiode: Wenn die Schriftart nicht geladen ist, behandelt der Benutzeragent sie als fehlgeschlagenen Ladevorgang und führt den normalen Schriftfalleffekt 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 des Fallback-Schriftanzeigeverhaltens
@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…