Unikaj przebłysków niewidocznego tekstu

Katie Hempenius
Katie Hempenius
X

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

Dodawanie obserwatora czcionki tarczy

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.