Wert von „font-display“
Zuletzt aktualisiert am
11. Juli 2023
Hier erfahren Sie, wie Sie mit Einstellungen für „font-display“ die Verarbeitung von Web-Schriften ändern.
Mit der Einstellung „font-display“ können Sie festlegen, wie Web-Schriften im Webbrowser geladen und auf Ihre Website angewendet werden. Es gibt fünf Optionen für „font-display“:
|
|
Verhalten |
|---|---|
|
Auto |
Erlaubt dem Browser, zum Laden der Schrift seine Standardmethode zu verwenden. |
|
Block |
Blendet den Text auf Ihrer Website aus, bis die Web-Schrift heruntergeladen wurde. Besucher Ihrer Website sehen bei dieser Option möglicherweise ein Flackern von unsichtbarem Text (Flash of Invisible Text, FOIT). |
|
Swap |
Zeigt die Ausweichschrift an, die Sie im CSS festgelegt haben, bis die Web-Schrift heruntergeladen wurde. Besucher deiner Website sehen möglicherweise einen Flash mit ungestyltem Text oder FOUT bei dieser Option. |
|
Fallback |
Verwendet für einen kurzen Zeitraum das Verhalten „Block“, wechselt dann zum Verhalten „Swap“ und wendet die Ausweichschrift auf den Text an. Wenn die Web Fonts am Ende der Swap-Periode nicht geladen wurden, bleibt die Ersatzschrift in Verwendung. |
|
Optional |
Verwendet das Verhalten „Block“ für einen kurzen Zeitraum und wendet dann die Ausweichschrift auf den Text an. Der Wert gibt dem Webbrowser die Option, die Web-Schrift gar nicht herunterzuladen, zum Beispiel, wenn der Website-Besucher eine langsame Internetverbindung hat. |
Technische Details zu „font-display“ und zu den unterstützten Werten finden Sie in der CSS Fonts Module Level 4-Spezifikation.
Anmerkung
Standardmäßig werden Web-Schrift-Projekte mit der Einstellung auto für „font-display“ erstellt.
Um die Einstellung für „font-display“ anzupassen, führen Sie die folgenden Schritte aus:
Klicken Sie auf der Seite mit Ihren Web-Projekten auf Projekt bearbeiten.
Wählen Sie auf der Seitenleiste einen der folgenden Werte für „font-display“ aus.Standardmäßig ist die font-display-Einstellung von Webschriftprojekten auf auto festgelegt.
Klicken Sie auf Änderungen speichern. Der Wert für „font-display“ wird innerhalb von wenigen Minuten auf Ihre Website angewendet.
Die neue Einstellung für „font-display“ wird automatisch als Teil des vorhandenen Einbettungscodes in Ihre Website eingefügt.
Vorhandene Web-Projekte aktualisieren
Seit September 2020 wird „font-display“ beim Laden von Adobe-Web-Schriften unterstützt. Web-Projekte, die vor September 2020 erstellt wurden, wurden aktualisiert, um das standardmäßige font-display: auto Verhalten zu verwenden.
Die Einstellung für „font-display“ für vorhandene Projekte kann wie oben beschrieben geändert werden. Nachdem Sie die Änderungen gespeichert haben, wird die neue Einstellung für „font-display“ als Teil des vorhandenen Einbettungscodes in Ihre Website eingebunden. Du musst keine Änderungen an der Website selbst vornehmen.
Stöbern in Adobe Fonts
Finde die passende Schrift für jedes Web- oder Print-Projekt.
