Schriftanzeige - CSS-Tricks

Anonim

Die font-displayEigenschaft definiert, wie Schriftdateien vom Browser geladen und angezeigt werden. Es wird auf die @font-faceRegel angewendet, die benutzerdefinierte Schriftarten in einem Stylesheet definiert.

@font-face ( font-family: 'MyWebFont'; /* Define the custom font name */ src: url('myfont.woff2') format('woff2'), url('myfont.woff') format('woff'); /* Define where the font can be downloaded */ font-display: fallback; /* Define how the browser behaves during download */ )

Werte

Die font-displayEigenschaft akzeptiert fünf Werte:

  • auto(Standard): Ermöglicht dem Browser, seine Standardmethode zum Laden zu verwenden, die meistens dem blockWert ähnlich ist.
  • block: Weist den Browser an, den Text kurz auszublenden, bis die Schriftart vollständig heruntergeladen wurde. Genauer gesagt zeichnet der Browser den Text mit einem unsichtbaren Platzhalter und tauscht ihn beim Laden mit der benutzerdefinierten Schriftart aus. Dies wird auch als "Blitz aus unsichtbarem Text" oder FOIT bezeichnet.
  • swap: Weist den Browser an, den Text mithilfe der Fallback-Schriftart anzuzeigen, bis die benutzerdefinierte Schriftart vollständig heruntergeladen wurde. Dies wird auch als "Blitz aus nicht gestyltem Text" oder "FOUT" bezeichnet.
  • fallback: Dient als Kompromiss zwischen autound swapWerten. Der Browser blendet den Text für ca. 100 ms aus und verwendet den Fallback-Text, wenn die Schriftart noch nicht heruntergeladen wurde. Es wird nach dem Herunterladen auf die neue Schriftart umgestellt, jedoch nur während einer kurzen Umtauschperiode (wahrscheinlich 3 Sekunden).
  • optional: fallbackDieser Wert weist den Browser an, den Text zunächst auszublenden und dann zu einer Fallback-Schriftart überzugehen, bis die benutzerdefinierte Schriftart zur Verwendung verfügbar ist. Mit diesem Wert kann der Browser jedoch auch bestimmen, ob die benutzerdefinierte Schriftart überhaupt verwendet wird, wobei die Verbindungsgeschwindigkeit des Benutzers als bestimmender Faktor verwendet wird, bei dem langsamere Verbindungen die benutzerdefinierte Schriftart weniger wahrscheinlich erhalten.

Hier ist eine andere Möglichkeit, über sie nachzudenken

Sperrfrist Swap-Zeitraum
Block Kurz Unendlich
Tauschen Keiner Unendlich
Zurückfallen Extrem kurz Kurz
Optional Extrem kurz Keiner

Warum wir brauchen font-display

Bevor wir breite Unterstützung für hatten @font-face, war unser typografisches Arsenal auf lokale Schriftarten beschränkt, wobei die einzigen verfügbaren Schriftarten diejenigen waren, die auf dem Computer des Endbenutzers vorinstalliert waren. Wir nennen diese "web-sicheren" Schriftarten, da der Browser nichts herunterladen muss, damit sie gerendert werden können.

Dann kam die @font-faceRegel, die Webdesignern und Front-End-Entwicklern wie nie zuvor neue typografische Fähigkeiten verlieh. Es ermöglichte uns, Schriftdateien auf einen Server hochzuladen und eine Reihe von Regeln in unsere Stylesheets zu schreiben, die die Schrift benennen und dem Browser mitteilen, wo die Dateien heruntergeladen werden sollen. Es entstanden auch Dienste wie Google Fonts, die der Masse benutzerdefinierte Schriftarten brachten. Schließlich war eine große Hürde genommen worden, die Webdesign von Printdesign trennte!

Benutzerdefinierte Schriftarten waren (und sind) jedoch kostenpflichtig. Schriftdateien können sehr groß sein und die zusätzliche Zeit zum Herunterladen der Dateien kann die Leistung einer Site beeinträchtigen, insbesondere bei Geräten mit einer langsameren Netzwerkverbindung. Die zusätzlichen Kosten für Benutzer mit begrenzten Datenplänen wurden ebenfalls zu einem Faktor.

Ein weiteres besonderes Problem, das bei benutzerdefinierten Schriftarten auftrat, war das, was als „Blitz aus nicht gestyltem Text“ oder kurz FOUT bezeichnet wurde. Browser zeigen standardmäßig eine Systemschrift an, während sie auf das Herunterladen der benutzerdefinierten Schrift warten. Dies ermöglichte das schnellere Laden von Webseiten, warf jedoch Bedenken bei Webdesignern auf, die dies als Entführung der Benutzererfahrung und falsche Darstellung des beabsichtigten Designs betrachteten. Heutzutage verbergen Webbrowser den Text im Allgemeinen, bis die benutzerdefinierte Schriftart heruntergeladen wurde, die wir jetzt als „Blitz aus unsichtbarem Text“ oder FOIT bezeichnen.

Weder FOUT noch FOIT sind großartig. Wir haben Möglichkeiten, die Leistung benutzerdefinierter Schriftarten zu optimieren, um die Effekte zu vereinfachen. Jetzt müssen wir font-displaydem Browser jedoch mitteilen, ob wir FOUT, FOIT oder sogar etwas dazwischen bevorzugen.

Testen auf Support

Interessante Einschränkung von Šime Vidas:

Die CSS-Schriftanzeige ist ein @font-faceDeskriptor und keine Eigenschaft, daher kann ihre Unterstützung im Browser nicht mit Feature-Abfragen (CSS- @supportsRegel und CSS.supports-API) getestet werden .

Mehr Informationen

  • Steuerelemente für das Rendern von CSS-Schriftarten Stufe 1 Spezifikation: Ein Entwurf der Spezifikation für die Eigenschaft.
  • font-display für die Massen: Jeremy Wagner hat uns hier auf CSS-Tricks das Anwesen vorgestellt.
  • Verwenden @font-face: Eine umfassende Erläuterung der Regel und bewährte Methoden für deren Verwendung.
  • System Font Stack: Ein Snippet, mit dem Sie auf benutzerdefinierte Schriftarten verzichten und sich ausschließlich auf die Systemschriftarten eines Benutzers verlassen können.
  • Steuern der Schriftleistung mit font-display: Eine ausführliche Beschreibung des Themas durch Google.

Browser-Unterstützung

Diese Browser-Unterstützungsdaten stammen von Caniuse, das detaillierter ist. Eine Zahl gibt an, dass der Browser die Funktion ab dieser Version unterstützt.

Desktop

Chrom Feuerfuchs IE Kante Safari
60 58 Nein 79 11.1

Handy / Tablet

Android Chrome Android Firefox Android iOS Safari
88 85 81 11.3-11.4