Einblenden von unsichtbarem Text vermeiden

Katie Hempenius
Katie Hempenius
X

In diesem Code-Lab erfahren Sie, wie Sie mit Font Face Beobachter.

Font Face Observer hinzufügen

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

  • Klicke auf Zum Bearbeiten Remix, damit das Projekt bearbeitet werden kann.
  • Fügen Sie ein Skript-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 auf der Seite verwendete Schriftfamilie.

  • Fügen Sie das folgende Skript nach dem Skript fontfaceobserver.js ein. Dadurch entstehen für den „Pacifico“ und „Roboto“ Schriftfamilien:
  <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 einmal nicht sicher sind, welche Schriftarten Sie erstellen müssen, die font-family-Deklarationen in Ihrem CSS-Code. Übergeben Sie den font-family-Namen dieser Deklarationen an FontFaceObserver(). Es ist nicht nötig, einen Font Beobachter für Fallback-Schriftarten verwendet werden.

Angenommen, Ihr Preisvergleichsportal war:

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

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

Schriftlast erkennen

Der Code zur Erkennung eines Schriftartenaufrufs 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 dieses Promise Ihrem Skript direkt unter den FontFaceObservers hinzu, die Sie gerade erklärt:
Promise.all([
  pacificoObserver.load(),
  robotoObserver.load()
]).then(function(){
  /* Do things */
});

✔️ Einchecken

Das Skript sollte nun 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 Skript durch diese Zeile:
document.documentElement.classList.add("fonts-loaded");

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

✔️ Einchecken

Das fertige Skript sollte in etwa so 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 anfangs eine Systemschriftart und einmalig benutzerdefinierte Schriftarten verwendet werden. Die Klasse fonts-loaded wurde angewendet.

  • 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, klicken Sie auf App ansehen. Drücken Sie dann Vollbild Vollbild

Wenn die Seite so aussieht, haben Sie die Schriftart Beobachtete und beseitigte den "Flash of Invisible Text" (Flash of Invisible Text).

Eine Überschrift in kursiver Schrift.