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
doindex.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 .
Jeśli strona wygląda tak, oznacza to, że udało Ci się zaimplementować Font Face Observer i uniknąć „błysku niewidocznego tekstu”.