Einblenden von unsichtbarem Text vermeiden

Katie Hempenius
Katie Hempenius
X

In diesem Codelab erfahren Sie, wie Sie Text mithilfe von Font Face Observer sofort anzeigen.

Font Face Observer 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 Script-Tag dafür hinzufügen.

  • Klicke auf Remix zum Bearbeiten, um das Projekt bearbeitbar zu machen.
  • Fügen Sie ein Script-Tag für fontfaceobserver.js zu index.html 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 das folgende Script nach dem fontfaceobserver.js-Script 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 Schriftschnitt-Beobachter Sie erstellen müssen, suchen Sie einfach in Ihrem CSS nach den font-family-Deklarationen. Übergeben Sie den font-family-Namen dieser Deklarationen an FontFaceObserver(). Für Fallback-Schriftarten müssen Sie keinen Schriftarten-Beobachter erstellen.

Angenommen, Ihr CSS lautet:

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

würden Sie FontFaceObserver('Times New Roman') hinzufügen. Times und serif sind Fallback-Schriftarten, sodass Sie für sie keine FontFaceObserver deklarieren müssen.

Schriftlast erkennen

Der Code zum Erkennen des Ladens einer Schriftart sieht so aus:

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

robotoObserver.load() ist ein Versprechen, das aufgelöst wird, wenn die Schriftart geladen wird.

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

  • Fügen Sie Ihrem Script dieses Promise direkt unter den FontFaceObservers hinzu, die Sie gerade deklariert haben:
Promise.all([
  pacificoObserver.load(),
  robotoObserver.load()
]).then(function(){
  /* Do things */
});

✔️ Check-in

Ihr Script sollte jetzt so 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>

fonts-loaded-Klasse anwenden

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

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

✔️ 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

Die Seite sollte so gestaltet sein, dass zuerst eine Systemschriftart und nach dem Anwenden der Klasse fonts-loaded 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

  • Wenn Sie sich eine Vorschau der Website ansehen möchten, drücken Sie App ansehen und dann Vollbild Vollbild.

Wenn die Seite so aussieht, haben Sie den Font Face Observer erfolgreich implementiert und das Problem mit dem „Blinken unsichtbaren Texts“ behoben.

Eine Überschrift in einer geschwungenen Schriftart.