Das Laden von JavaScript-Schriftarten, das für dynamische Untergruppen verwendet wird, umfasst Schriftereignisse, mit denen Sie Ihre Webseite abhängig davon anpassen können, ob die Schriftarten aktiv sind, noch geladen werden oder aus irgendeinem Grund nicht verfügbar sind.

Schriftereignisse sind noch nicht im CSS-Einbettungscode enthalten. Sie können zusätzlich zum CSS-Einbettungscode eine weitere JavaScript-Bibliothek einfügen, um das Laden der Schriftarten anzupassen.

Verwenden von Schriftereignissen in CSS

Um Ihnen bessere Kontrolle zu ermöglichen, wie Ihre Seite angezeigt wird, während Schriftarten geladen werden oder inaktiv sind, bietet der JavaScript-Einbettungscode eine Reihe von Schriftereignissen, die ausgelöst werden, wenn Schriftarten in die Seite geladen werden.

Es gibt drei wesentliche Schriftereignisse, von denen jedes über einen entsprechenden Klassennamen (in Klammern) verfügt:

  1. loading (.wf-loading): Webschriftarten werden geladen
  2. active (.wf-active): Webschriftarten sind inaktiv
  3. inactive (.wf-inactive): Webschriftarten 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 Schriftarten gestylt wird. 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 Schriftart-Ereignisklassen zum Steuern des Aufblitzens von ungestyltem Text (FOUT-Effekt) und zum Definieren der Ausweichschriften und -stile für Browser verwendet, die keine Webschriftarten 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 Schriftarten 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 Schriftarten 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 Schriftartbeschreibung für jede einzelne Variante übergeben.

Verwenden von Schriftereignissen: Verwalten von FOUT-Effekten (Flash of Unstyled Text)

Jeder Browser handhabt das Laden von Webschriftarten auf andere Weise. Wenn ein Browser den Text zunächst in einer Ausweichschrift anzeigt und nach Abschluss des Ladevorgangs zu den verknüpften Schriftarten wechselt, kann es zu einem FOUT-Effekt (Flash of Unstyled Text, kurzes Aufblitzen von nicht gestyltem Text) kommen.

Wenn Schriftarten 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 Schriftart und die geladene Webschriftart dieselbe Größe aufweisen. Alternativ können Sie Ihren Text ausblenden, bis die Schriftart 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 Webschriftarten 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 Webschriftarten 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 Webschriftarten formatierten Text mit dem Flash Of Unstyled Text-Effekt (FOUT) dar. Dies bedeutet, dass der Browser Ausweichschriften anzeigt, bis die Webschriftarten geladen wurden, und dann zur Darstellung der Webschriftarten wechselt, nachdem diese zur Verfügung stehen. Dies unterscheidet sich von dem alternativen Ansatz zur Darstellung von Webschriftarten, bei dem ein Browser einen Text verbirgt, bis die Webschriftarten heruntergeladen wurden und den Text dann, nach dem Laden der Webschriftarten, mit dem Webschriftartenstil 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:

  1. .wf-loading: Hinzugefügt, wenn Schriftarten geladen werden;
  2. .wf-active: Hinzugefügt, wenn mindestens eine Schriftart geladen wurde;
  3. .wf-inactive: Hinzugefügt, wenn keine der Schriftarten 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 Webschriftart verwenden, verwenden Sie dieses CSS, um sie auszublenden, während die Schriftarten geladen werden.

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

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

Dieses Werk unterliegt den Bedingungen der Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License.  Twitter™- und Facebook-Beiträge fallen nicht unter die Bedingungen der Creative Commons-Lizenz.

Rechtliche Hinweise   |   Online-Datenschutzrichtlinie