Unikaj przebłysków niewidocznego tekstu

Katie Hempenius
Katie Hempenius
X

W tym module nauczysz się, jak szybko wyświetlać tekst za pomocą narzędzia Obserwacja kroju czcionki.

Dodaj obserwatora twarzy czcionek

Font Face Observer to skrypt, który wykrywa, kiedy wczytuje się czcionka. Plik fontfaceobserver.js jest już zapisany w katalogu projektu, więc nie musisz go dodawać oddzielnie. Trzeba jednak dodać do niej tag skryptu.

  • Aby umożliwić edytowanie projektu, kliknij Zremiksuj do edycji.
  • Dodaj tag skryptu dotyczący skryptu fontfaceobserver.js do tagu index.html:
  <div class="text">Some text.</div>
  <script src="fontfaceobserver.js" type="text/javascript"></script>
</body>

Użyj obserwatora twarzy czcionek

Tworzenie obserwatorów

Utwórz obserwatora dla każdej rodziny czcionek używanej na stronie.

  • Dodaj ten skrypt po skrypcie fontfaceobserver.js. Spowoduje to utworzenie obserwacji 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 obserwatorzy twarzy czcionki musisz utworzyć, po prostu znajdź deklaracje font-family w swoim CSS. Przekaż font-family nazwę tych deklaracji do FontFaceObserver(). W przypadku czcionek zastępczych nie trzeba tworzyć obserwatora czcionek.

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

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

musisz dodać FontFaceObserver('Times New Roman'). Times i Serif to czcionki zastępcze, więc nie musisz dla nich deklarować FontFaceObservers.

Wykrywanie wczytania czcionki

Oto kod wykrywania wczytania czcionki:

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

robotoObserver.load() to komunikat, który znika po wczytaniu czcionki.

Witryna demonstracyjna używa 2 różnych czcionek, więc musisz użyć Promise.all(), żeby poczekać na wczytanie obu czcionek.

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

✔️Zameldowanie

Twój skrypt powinien teraz 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 fonts-loaded zajęcia

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

Spowoduje to dodanie klasy fonts-loaded do głównego elementu dokumentu (tagu <html>) po wczytaniu obu czcionek.

✔️Zameldowanie

Ukończony 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 być ustawiony tak, aby początkowo używał czcionki systemowej, a po zastosowaniu klasy fonts-loaded czcionek niestandardowych.

  • 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ę, a potem Pełny ekran pełny ekran.

Jeśli strona wygląda tak, oznacza to, że udało Ci się zaimplementować Obserwator twarzy czcionek i usunąć „flash niewidocznego tekstu”.

Nagłówek zapisany kursywą.