CSS-Eigenschaft font-display

Die Eigenschaft font-display definiert, wie die Schriftdateien vom Browser heruntergeladen und angezeigt werden. Diese Eigenschaft hat die folgenden Werte:

  • auto
  • block
  • swap
  • fallback
  • optional

Die Eigenschaft font-display teilt dem Browser mit, ob FOUT (flash of unstyled text) oder FOIT (flash of invisible text) bevorzugt wird.

Anfangswert auto
Gilt für Alle Elemente. Es gilt auch für ::first-letter und ::first-line.
Geerbt Ja
Animierbar Nein
Version CSS1
DOM Syntax object.style.fontDisplay = "swap";

Syntax

front-display: auto | block | swap | fallback | optional | initial | inherit;
@font-face {
font-family: 'MyWebFont'; /* Definieren Sie den benutzerdefinierten Schriftnamen  */
src:  url('myfont.woff2') format('woff2'),
url('myfont.woff') format('woff'); /* Definieren Sie, wo die Schrift heruntergeladen werden kann */
font-display: fallback; /* Definieren Sie, wie sich der Browser während des Downloads verhält */
}

Values

Value Description
auto Die Schriftartanzeige wird durch den Browser definiert.
block Kurzzeitig verbirgt der Text, bis die Schrift vollständig heruntergeladen ist.
swap Gibt der Schriftart eine sehr kleine Blockperiode und eine unendliche Austauschperiode.
fallback Gibt der Schriftart eine sehr kleine Blockperiode und eine kurze Austauschperiode.
optional Gibt der Schriftart eine sehr kleine Blockperiode und keine Austauschperiode.
initial Der Wert stellt die Eigenschaft auf seinen Standardwert ein.
inherit Der Wert erbt die Eigenschaft von seinem übergeordneten Element.

Browser-Support

chrome edge firefox safari opera
60.0+ 58.0+ 11.1+ 47.0+

Übe dein Wissen

Was macht die CSS-Eigenschaft 'font-display'?
Finden Sie das nützlich?