Benutzerhandbuch Abbrechen

Schriftereignisse

Suchen

Zuletzt aktualisiert am 1. Mai 2021

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): Webschriften werden geladen
active (.wf-active): Webschriften sind inaktiv
inactive (.wf-inactive): Webschriften 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:

.wf-loading {
/* styles to use when web fonts are loading */
}

.wf-active {
/* styles to use when web fonts are active */
}

.wf-inactive {
/* styles to use when web fonts are inactive */
}

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:

<script>
  try {
    Typekit.load({
      loading: function() {
        // JavaScript to execute when fonts start loading
      },
      active: function() {
        // JavaScript to execute when fonts become active
      },
      inactive: function() {
        // JavaScript to execute when fonts become inactive
      }
    })
  } catch(e) {}
</script>

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 Webschriften 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 Fonts geladen wurden, ändert sich die Klasse in .wf-active. Entsprechend können Sie Folgendes zu Ihren Stylesheets hinzufügen:

.wf-loading h1 {
/* styles to use while fonts are loading */
}

.wf-active h1 {
/* styles to use after fonts have loaded */
}

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 Webschrift dieselbe Größe aufweisen. Alternativ können Sie Ihren Text ausblenden, bis die Schrift vollständig geladen ist. Beispiel:

<style>
.wf-loading h1 {
font-family: "droid-sans";
visibility: hidden;
}
.wf-active h1 {
visibility: visible;
}
</style>

<body>
<h1>This headline will be hidden until Droid Sans is completely loaded.</h1>
</body>

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 Webschriften 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 Webschrift so anpassen, dass das Layout auch dann konsistent bleibt, wenn die Webschriften nicht geladen werden können. Gehen Sie folgendermaßen vor:

.headline {
/* These fallback styles are used by default */
font-family: Arial, sans-serif;
font-size: 18px; /* Smaller size for non-condensed fallback font */
}

.wf-active .headline {
/* These styles are used when web fonts are active */
font-family: "proxima-nova-extra-condensed",Arial, sans-serif;
font-size: 24px;  /* Larger size for condensed font */
}

Verwenden von Schriftereignissen: Simulieren von FOIT-Effekten (Flash of Invisible Text) für dynamische Projekte

Standardmäßig stellen dynamische Projekte einen mit Webschriften formatierten Text mit dem Flash Of Unstyled Text-Effekt (FOUT) dar. Dies bedeutet, dass der Browser Ausweichschriften anzeigt, bis die Webschriften geladen wurden, und dann zur Darstellung der Webschriften wechselt, nachdem diese zur Verfügung stehen. Dies unterscheidet sich von dem alternativen Ansatz zur Darstellung von Webschriften, bei dem ein Browser einen Text verbirgt, bis die Webschriften heruntergeladen wurden und den Text dann, nach dem Laden der Webschriften, mit dem Webschriftenstil 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:

.wf-loading {
/* styles to use when web fonts are loading */
}

.wf-active {
/* styles to use when web fonts are active */
}

.wf-inactive {
/* styles to use when web fonts are inactive */
}

Wenn die h1- und p-Elemente eine Webschrift verwenden, verwenden Sie dieses CSS, um sie auszublenden, während die Schriften geladen werden.

.wf-loading h1, .wf-loading p {
visibility: hidden;
}

.wf-active h1, .wf-active p, .wf-inactive h1, .wf-inactive p {
visibility: visible;
}

Mehr

Warum stammen meine Webschriften von use.typekit.net?

Schneller und einfacher Hilfe erhalten

Neuer Benutzer?