Einblenden von unsichtbarem Text vermeiden

Katja Hempenius
Katie Hempenius
X

In diesem Code-Lab erfahren Sie, wie Sie mit dem Font Face Observer Text sofort anzeigen lassen können.

Font Face-Beobachter hinzufügen

Font Face Observer ist ein Skript, das erkennt, wenn eine Schriftart geladen wird. Die Datei fontfaceobserver.js wurde bereits im Projektverzeichnis gespeichert, sodass Sie sie nicht separat hinzufügen müssen. Sie müssen jedoch ein Skript-Tag dafür hinzufügen.

  • Klicke auf Zu bearbeitende Remixe, damit das Projekt bearbeitet werden kann.
  • Fügen Sie index.html ein Skript-Tag für fontfaceobserver.js hinzu:
  <div class="text">Some text.</div>
  <script src="fontfaceobserver.js" type="text/javascript"></script>
</body>

Font Face Observer verwenden

Beobachter erstellen

Erstellen Sie einen Beobachter für jede Schriftfamilie, die auf der Seite verwendet wird.

  • Fügen Sie nach dem Skript fontfaceobserver.js das folgende Skript hinzu. Dadurch werden Beobachter für die Schriftfamilien „Pacifico“ und „Roboto“ erstellt:
  <script src="fontfaceobserver.js" type="text/javascript"></script>
  <script type="text/javascript">
    const pacificoObserver = new FontFaceObserver('Pacifico');
    const robotoObserver = new FontFaceObserver('Roboto');
  </script>
<body>

Wenn Sie sich nicht sicher sind, welche Font Face-Beobachter Sie erstellen müssen, suchen Sie in Ihrem CSS-Code einfach nach den font-family-Deklarationen. Übergeben Sie den font-family-Namen dieser Deklarationen an FontFaceObserver(). Für Fallback-Schriftarten muss kein Font-Observer erstellt werden.

Wenn Ihr Preisvergleichsportal beispielsweise

font-family: "Times New Roman", Times, serif;

würden Sie FontFaceObserver('Times New Roman') hinzufügen. Times und Serif sind Fallback-Schriftarten, Sie müssen also keine FontFaceObservers dafür deklarieren.

Schriftlast erkennen

Der Code für die Erkennung eines Schriftladevorgangs sieht wie folgt aus:

robotoObserver.load().then(function(){
  console.log("Hooray! Font loaded.");
});

robotoObserver.load() ist ein Versprechen, das beim Laden der Schriftart aufgelöst wird.

Auf der Demowebsite werden zwei verschiedene Schriftarten verwendet. Sie müssen also Promise.all() verwenden, um zu warten, bis beide Schriftarten geladen sind.

  • Fügen Sie Ihrem Skript dieses Versprechen direkt unter den soeben deklarierten FontFaceObservers hinzu:
Promise.all([
  pacificoObserver.load(),
  robotoObserver.load()
]).then(function(){
  /* Do things */
});

✔️Check-in

Ihr Skript sollte jetzt wie folgt aussehen:

<script type="text/javascript">
const pacificoObserver = new FontFaceObserver('Pacifico');
const robotoObserver = new FontFaceObserver('Roboto');

Promise.all([
  pacificoObserver.load(),
  robotoObserver.load()
]).then(function(){
  /* Do things */
});
</script>

Klasse fonts-loaded anwenden

  • Ersetzen Sie den Kommentar /* Do things */ im Skript durch diese Zeile:
document.documentElement.classList.add("fonts-loaded");

Dadurch wird die Klasse fonts-loaded dem Stammelement des Dokuments (dem Tag <html>) hinzugefügt, sobald beide Schriftarten geladen sind.

✔️Check-in

Das fertige Skript sollte wie folgt aussehen:

<script type="text/javascript">
  const pacificoObserver = new FontFaceObserver('Pacifico');
  const robotoObserver = new FontFaceObserver('Roboto');

  Promise.all([
    pacificoObserver.load(),
    robotoObserver.load()
  ]).then(function(){
    document.documentElement.className += " fonts-loaded";
  });
</script>

CSS aktualisieren

Ihre Seite sollte so gestaltet sein, dass zuerst eine Systemschrift und nach dem Anwenden der fonts-loaded-Klasse benutzerdefinierte Schriftarten verwendet werden.

  • Aktualisieren Sie das CSS:
.header {
html.fonts-loaded .header {
  font-family: 'Pacifico', cursive;
}

.text
html.fonts-loaded .text {
  font-family: 'Roboto', sans-serif;
}

Bestätigen

  • Um die Website als Vorschau anzusehen, wählen Sie App ansehen und dann Vollbild Vollbild aus.

Wenn die Seite so aussieht, haben Sie Font Face Observer erfolgreich implementiert und das Flash of unsichtbaren Text entfernt.

Eine Überschrift in Kursivschrift.