Savetheinternet.png

Die EU-Urheberrechtsreform wird das Internet, wie wir es kennen, grundlegend verändern – wenn sie denn in der finalen Abstimmung angenommen wird. Das können wir aber immer noch verhindern!

Weitere Informationen: https://juliareda.eu/2019/02/artikel-13-endgueltig/

CSS/Eigenschaften/Schriftformatierung/font-display

Aus SELFHTML-Wiki
< CSS‎ | Eigenschaften‎ | Schriftformatierung(Weitergeleitet von Font-display)
Wechseln zu: Navigation, Suche

Mit font-display bestimmen Sie, wie Text-Elemente mit Webfonts dargestellt dargestellt werden in Abhängigkeit davon, wie schnell der Webfont zur Verfügung steht.

  • Chrome
  • Firefox
  • Leer
  • Opera
  • Safari

Details: caniuse.com

Herunterladen von Webfonts[Bearbeiten]

Der Prozess des Herunterladens einer Schriftart wird in drei Abschnitte unterteilt:

block - blockieren
Während dieser Zeit werden alle Elemente, die in dieser Schriftart dargestellt werden sollen, in einer unsichtbaren Alternativ-Schriftart gerendert.
Wenn die Schriftart in dieser Zeit geladen werden kann, wird sie normal verwendet.
swap - tauschen
Während dieser Zeit werden alle Elemente, die in dieser Schriftart dargestellt werden sollen, in einer sichtbaren Alternativ-Schriftart gerendert.
Wenn die Schriftart in dieser Zeit geladen werden kann, wird sie normal verwendet.
failure - fehlgeschlagen
Das Laden der Schrift wird als fehlgeschlagen betrachtet, alle Elemente werden in einer sichtbaren Alternativ-Schriftart dargestellt.

font-display[Bearbeiten]

Innerhalb einer @font-face-Regel können Sie die Dauer der ersten beiden Abschnitte beeinflussen.

Beispiel
@font-face {
  font-family: MyFont;
  src: url(fonts/myfont.woff) format('woff');
  font-weight: 800;
  font-style: normal;
  font-display: fallback;
}

Erlaubt sind folgende Angaben

  • auto, der Browser bestimmt das Verhalten, Standardwert, meist block
  • block, die Blockier-Phase dauert ca. 3 Sekunden, die Austausch-Phase ist unbegrenzt.
Das heißt, das Element wird zunächst für eine recht lange Zeitspanne nicht sichtbar dargestellt, danach in einer Alternativ-Schriftart und wenn die Schriftart zur Verfügung steht (egal wie lange es dauert), wird das Element in der gewünschten Schriftart dargestellt.
  • swap, die Blockier-Phase dauert 0,1 s oder weniger, die Austausch-Phase ist unbegrenzt
  • fallback, die Blockier-Phase dauert 0,1 s oder weniger, die Austausch-Phase dauert ca. 3 s
Das heißt, wenn die Schriftart nicht innerhalb der Austausch-Phase heruntergeladen werden kann, wird das Element dauerhaft in einer Alternativ-Schriftart dargestellt. Der Download wird im Hintergrund fortgesetzt.
  • optional, die Blockier-Phase dauert 0,1 s oder weniger, die Austausch-Phase gibt es nicht
Das bedeutet, das Element wird nur dann mit dem Webfont dargestellt, wenn er bereits im Cache zur Verfügung steht. Der Download des Webfonts wird im Hintergrund fortgesetzt.

Weblinks[Bearbeiten]