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 (Obserwator twarzy czcionki) to skrypt, który wykrywa wczytanie czcionki. Plik fontfaceobserver.js został już zapisany w katalogu projektu, więc nie musisz go dodawać oddzielnie. Musisz jednak dodać dla niego tag skryptu.

  • Aby udostępnić projekt do edycji, kliknij Remiksuj, aby edytować.
  • 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 CSS deklaracji font-family. Przekaż nazwę font-family tych deklaracji do narzędzia FontFaceObserver(). W przypadku czcionek zastępczych nie trzeba tworzyć narzędzia do obserwowania czcionek.

Jeśli np. Twoja usługa porównywania cen:

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

dodasz FontFaceObserver('Times New Roman'). Times i Serif jest czcionkami zastępczymi, więc nie trzeba deklarować dla nich parametru FontFaceObservers.

Wykrywanie wczytywania czcionki

Kod służący do wykrywania obciążenia czcionki 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 zadeklarowanymi elementami FontFaceObservers:
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>

Zaktualizuj CSS

Styl strony powinien na początku używać czcionki systemowej i czcionek niestandardowych po zastosowaniu klasy fonts-loaded.

  • Zaktualizuj 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 ekranpeł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.