Unikaj przebłysków niewidocznego tekstu

Katie Hempenius
Katie Hempenius

Z tego modułu dowiesz się, jak wyświetlać tekst natychmiast za pomocą Font Face Observer.

Font Face Observer to skrypt, który wykrywa, kiedy czcionka jest wczytywana. Plik fontfaceobserver.js został już zapisany w katalogu projektu, więc nie musisz go dodawać osobno. Musisz jednak dodać dla niego tag skryptu.

  • Kliknij Remixuj do edycji, aby umożliwić edycję projektu.
  • Dodaj tag skryptu fontfaceobserver.js do index.html:
  <div class="text">Some text.</div>
  <script src="fontfaceobserver.js" type="text/javascript"></script>
</body>

Używanie obserwatora czcionek

Tworzenie obserwatorów

Utwórz obserwatora dla każdej rodziny czcionek, która jest używana na stronie.

  • Dodaj poniższy skrypt po skrypcie fontfaceobserver.js. Spowoduje to utworzenie obserwatorów dla rodzin czcionek „Pacifico” i „Roboto”:
  <script src="fontfaceobserver.js" type="text/javascript"></script>
  <script type="text/javascript">
    const pacificoObserver = new FontFaceObserver('Pacifico');
    const robotoObserver = new FontFaceObserver('Roboto');
  </script>
<body>

Jeśli nie masz pewności, jakie obserwatory czcionek musisz utworzyć, poszukaj w pliku CSS deklaracji font-family. Przekaż nazwę tych deklaracji (font-family) do funkcji FontFaceObserver(). Nie musisz tworzyć obserwatora czcionek dla czcionek zapasowych.

Jeśli na przykład Twoja usługa porównywania cen:

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

dodasz FontFaceObserver('Times New Roman'). Times i serif to czcionki zapasowe, więc nie trzeba ich deklarować za pomocą interfejsu FontFaceObserver.

Wykrywanie wczytywania czcionki

Kod do wykrywania wczytywania czcionek wygląda tak:

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

robotoObserver.load() to obietnica, która jest spełniana po załadowaniu czcionki.

Witryna demonstracyjna używa 2 różnych czcionek, więc musisz użyć Promise.all(), aby poczekać, aż wczytają się oba czcionki.

  • Dodaj tę obietnicę do skryptu tuż pod deklaracją obserwatorów FontFaceObserver:
Promise.all([
  pacificoObserver.load(),
  robotoObserver.load()
]).then(function(){
  /* Do things */
});

✔️Zameldowanie

Twój skrypt powinien wyglądać tak:

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

Zastosuj klasę fonts-loaded

  • Zastąp w skrypcie komentarz /* Do things */ tym wierszem:
document.documentElement.classList.add("fonts-loaded");

Gdy oba czcionki zostaną załadowane, klasa fonts-loaded zostanie dodana do elementu katalogu dokumentu (tagu <html>).

✔️Zameldowanie

Gotowy skrypt powinien wyglądać tak:

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

Aktualizacja kodu CSS

Strona powinna być stylizowana tak, aby początkowo używać czcionki systemowej, a po zastosowaniu klasy fonts-loaded – czcionek niestandardowych.

  • Zaktualizuj kod CSS:
.header {
html.fonts-loaded .header {
  font-family: 'Pacifico', cursive;
}

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

Zweryfikuj

  • Aby wyświetlić podgląd strony, kliknij Wyświetl aplikację. Następnie kliknij Pełny ekran pełny ekran.

Jeśli strona wygląda tak, oznacza to, że udało Ci się zaimplementować Font Face Observer i uniknąć „błysku niewidocznego tekstu”.

Nagłówek w czcionce kursywie.