Unikaj przebłysków niewidocznego tekstu

Katie Hempenius
Katie Hempenius
X

W tym laboratorium z kodem dowiesz się, jak natychmiast wyświetlać tekst przy użyciu krój czcionki Observer (obserwator).

Dodaj obserwator twarzy czcionki

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

  • Aby udostępnić projekt do edycji, kliknij Remiksuj, aby edytować.
  • Dodaj tag skryptu dla fontfaceobserver.js do index.html:
  <div class="text">Some text.</div>
  <script src="fontfaceobserver.js" type="text/javascript"></script>
</body>

Użyj obserwatora twarzy czcionki

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. Powoduje to obserwatorów sondy „Pacifico” i „Roboto” rodziny czcionek:
  <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 wiesz, jakie twarze czcionek musisz utworzyć, poszukaj z deklaracjami font-family w usłudze porównywania cen. Przekaż nazwę tych deklaracji (font-family) do: FontFaceObserver() Nie trzeba tworzyć narzędzia do sprawdzania czcionek, czcionki zastępcze.

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

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

dodaj FontFaceObserver('Times New Roman'). Times i szeryfowa to dzięki tym czcionkom, nie musisz dla nich deklarować 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 kończy się po załadowaniu czcionki.

Strona demonstracyjna używa 2 różnych czcionek, więc musisz używać Promise.all() poczekaj na wczytanie obu czcionek.

  • Dodaj tę obietnicę do skryptu, bezpośrednio pod obiektem FontFaceObservers, właśnie zadeklarował:
Promise.all([
  pacificoObserver.load(),
  robotoObserver.load()
]).then(function(){
  /* Do things */
});

✔️Zamelduj się

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 zajęcia fonts-loaded

  • 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 (parametr <html>).

✔️Zamelduj się

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 był używany z czcionką systemową, a z czcionkami niestandardowymi. zastosowano klasę 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 naciśnij Pełny ekran pełny ekran

Jeżeli strona wygląda tak, oznacza to, że krój czcionki został wdrożony. Obserwatorzy i zrezygnowali z „błysku niewidocznego tekstu”.

Nagłówek zapisany kursywą.