Anpassen der Verarbeitung von Webschriften mit Einstellungen für „font-display“

Hier erfahren Sie, wie Sie mit Einstellungen für „font-display“ die Verarbeitung von Webschriften ändern.

Mit der Einstellung „font-display“ können Sie festlegen, wie Webschriften im Webbrowser geladen und auf Ihre Website angewendet werden. Es gibt fünf Optionen für „font-display“:

Wert von „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 Webschrift 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 Webschrift heruntergeladen wurde. Besucher Ihrer Website sehen bei dieser Option möglicherweise ein Flackern von nicht formatiertem Text (Flash of Unstyled Text, FOUT).

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 Webschriften bis zum Ende des Swap-Zeitraums noch nicht geladen wurden, wird weiterhin die Ausweichschrift verwendet. 

Optional

Verwendet das Verhalten „Block“ für einen kurzen Zeitraum und wendet dann die Ausweichschrift auf den Text an. Bei diesem Wert ist es möglich, dass der Webbrowser die Webschrift überhaupt nicht herunterlädt, z. B. wenn der Besucher der Website eine langsame Internetverbindung verwendet. 

Technische Details zu „font-display“ und zu den unterstützten Werten finden Sie in der CSS Fonts Module Level 4-Spezifikation.

Hinweis:

Standardmäßig werden Webschriftprojekte mit der Einstellung auto für „font-display“ erstellt.

Um die Einstellung für „font-display“ anzupassen, führen Sie die folgenden Schritte aus:

  1. Klicken Sie auf der Seite mit Ihren Webprojekten auf Projekt bearbeiten.

    Projekt bearbeiten
    Projekt bearbeiten

  2. Wählen Sie auf der Seitenleiste einen der folgenden Werte für „font-display“ aus. Die Standardeinstellung für „font-display“ bei Webschriftprojekten ist auto.  

    font display settings

  3. 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 Webprojekte aktualisieren

Seit September 2020 wird „font-display“ beim Laden von Adobe-Webschriften unterstützt. Webprojekte, die vor September 2020 erstellt wurden, wurden aktualisiert und verwenden nun das Standardverhalten font-display: auto

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. Sie müssen keine Änderungen an der Website selbst vornehmen. 

Adobe-Logo

Bei Ihrem Konto anmelden