Schriftereignisse sind beim Laden von JavaScript-Schriften verfügbar, das für dynamisches teilweises Laden verwendet wird. Mit den Schriftereignissen können Sie Ihre Webseite abhängig davon anpassen, ob die Schriften aktiv sind, noch geladen werden oder aus irgendeinem Grund nicht verfügbar sind.
Für das Laden von CSS-Schriften sind noch keine Schriftereignisse verfügbar. Wenn Sie den Standard-CSS-Einbettungscode oder @import auf Ihrer Website verwenden, können Sie eine andere JavaScript-Bibliothek einschließen, um das Laden von Schriften individuell anzupassen
Verwenden von Schriftereignissen in CSS
Damit Sie mehr Kontrolle darüber haben, wie Ihre Seite angezeigt wird, während Schriften geladen werden oder inaktiv sind, bietet der JavaScript-Einbettungscode eine Reihe von Schriftereignissen, die ausgelöst werden, wenn Schriften in die Seite geladen werden.
Es gibt drei wesentliche Schriftereignisse, von denen jedes über einen entsprechenden Klassennamen (in Klammern) verfügt:
- loading (.wf-loading): Web-Schriften werden geladen
- active (.wf-active): Web-Schriften sind inaktiv
- inactive (.wf-inactive): Web-Schriften sind inaktiv
Die mit diesen Ereignissen verbundenen CSS-Klassen werden während des Ladens an das HTML-Element angehängt. Sie können sie in Ihren Stylesheets verwenden, um zu steuern, wie die Seite während des Ladens der Schriften gestylt wird. Zum Beispiel:
Häufig werden Schrift-Ereignisklassen zum Steuern des Aufblitzens von unformatiertem Text (FOUT-Effekt) und zum Definieren der Ausweichschriften und -stile für Browser verwendet, die keine Webschriften unterstützen oder in denen diese deaktiviert sind. Wir empfehlen, in jedem Fall Ausweichschriften und -stile aufzunehmen, da bestimmte Kombinationen von Browser, Betriebssystem und Benutzereinstellungen dazu führen können, dass Schriften auf Ihrer Seite inaktiv sind.
JavaScript-Schriftereignisse
Diese Schriftereignisse stehen auch zur Verfügung, wenn JavaScript-Callbacks über die Typekit.load-Methode zu Problemen führen. Sie können ein Objekt mit Callback-Funktionen übergeben, wenn Sie Typekit.load aufrufen, und diese Callback-Funktionen werden aufgerufen, wenn während des Ladens verschiedene Schriftereignisse auftreten. Beispiel:
JavaScript-Callbacks können dazu verwendet werden, Einblendungen während des Ladens von Schriften hinzuzufügen oder komplexe mathematische Größenänderungen für Präsentationslayouts basierend auf den Abmessungen des gerenderten Textes auszuführen.
Zusätzlich zu diesen grundlegenden Schriftereignissen werden auch detailliertere Schriftereignisse für einzelne Schriftvarianten bereitgestellt. Die Klassennamen für diese Ereignisse sind eine Kombination aus Schriftfamiliennamen, Schriftvariationsbeschreibung und Schriftereignisnamen. Das Hinzufügen der normalen 400er-Stärke von Gesta zu einem Projekt würde zu Schriftereignisklassen wie wf-gesta-n4-loading und wf-gesta-n4-active führen. Auf der JavaScript-Seite stehen fontloading-, fontactive- und fontinactive-Callbacks zur Verfügung. Sie können die Schriftfamilien- und Schriftbeschreibung für jede einzelne Variante übergeben.
Verwenden von Schriftereignissen: Verwalten von FOUT-Effekten (Flash of Unstyled Text)
Jeder Browser handhabt das Laden von Web-Schriften auf andere Weise. Wenn ein Browser den Text zunächst in einer Ausweichschrift anzeigt und nach Abschluss des Ladevorgangs zu den verknüpften Schriften wechselt, kann es zu einem FOUT-Effekt (Flash of Unstyled Text, kurzes Aufblitzen von unformatiertem Text) kommen.
Wenn Schriften geladen werden, wird eine Klasse von .wf-loading auf das HTML-Element angewendet. Sobald die Schriften geladen sind, ändert sich diese Klasse zu .wf-active. Du kannst also Folgendes zu deinen Stylesheets hinzufügen:
Deshalb können Sie Ihre Stile anpassen, um den FOUT-Effekt weniger störend zu gestalten, indem Sie beispielsweise sicherstellen, dass die blinkende Schrift und die geladene Web-Schrift dieselbe Größe aufweisen. Alternativ können Sie Ihren Text ausblenden, bis die Schrift vollständig geladen ist. Beispiel:
Der Hilfeartikel Erstellen von Ausweichschriften enthält weitere Beispiele für das Einstellen von CSS-Stilen mit Schriftereignissen.
Verwenden von Schriftereignissen: Erstellen von Ausweichschriften
Schriften werden als Assets in eine Webseite geladen – wie Bilder oder Videos. Abhängig von der Kombination von Betriebssystem, Webbrowser, installierten Erweiterungen, Benutzereinstellungen und Verbindungsgeschwindigkeit können Web-Schriften manchmal nicht geladen werden. In diesen Fällen werden stattdessen die Ausweichschriften aus dem CSS-Stapel verwendet.
Beispielsweise können Sie die Größe der Ausweichschriften bei Verwendung einer komprimierten Web-Schrift so anpassen, dass das Layout auch dann konsistent bleibt, wenn die Web-Schriften nicht geladen werden können. Gehen Sie folgendermaßen vor:
Verwenden von Schriftereignissen: Simulieren von FOIT-Effekten (Flash of Invisible Text) für dynamische Projekte
Standardmäßig stellen dynamische Projekte einen mit Web-Schriften formatierten Text mit dem Flash Of Unstyled Text-Effekt (FOUT) dar. Dies bedeutet, dass der Browser Ausweichschriften anzeigt, bis die Web-Schriften geladen wurden, und dann zur Darstellung der Web-Schriften wechselt, nachdem diese zur Verfügung stehen. Dies unterscheidet sich von dem alternativen Ansatz zur Darstellung von Web-Schriften, bei dem ein Browser einen Text verbirgt, bis die Web-Schriften heruntergeladen wurden und den Text dann, nach dem Laden der Web-Schriften, mit dem Web-Schriften-Stil anzeigt. Dies wird als Flash Of Invisible Text-Effekt (FOIT)-Effekt bezeichnet.
Der FOUT-Ansatz erstellt sofort nutzbare Seiten, was vor allem bei langsameren Netzwerkverbindungen praktisch ist. Wenn Sie jedoch den FOIT-Ansatz bevorzugen, können Sie ihn auf allen Browsern simulieren, indem Sie Schriftereignisse verwenden. Bei Schriftereignissen handelt es sich um drei Klassen, die zu einem der folgenden Elemente hinzugefügt werden:
- .wf-loading: wird hinzugefügt, wenn Schriften geladen werden;
- .wf-active: wird hinzugefügt, wenn mindestens eine Schrift geladen wurde;
- .wf-inactive: wird hinzugefügt, wenn keine der Schriften geladen wurde.
Sie können diese drei Klassen in Ihrem CSS verwenden, um das FOIT-Laden zu simulieren, indem Sie Text ausblenden, wenn die wf-loading-Klasse aktiv ist, und den Text anzeigen, wenn die wf-active- oder wf-inactive-Klasse aktiv ist:
Wenn die h1- und p-Elemente eine Webschrift verwenden, verwenden Sie dieses CSS, um sie auszublenden, während die Schriften geladen werden.
Ähnliche Themen
Stöbern in Adobe Fonts
Finde die passende Schrift für jedes Web- oder Print-Projekt.
