Évitez le flash de texte invisible.

Katie Hempenius
Katie Hempenius
X

Cet atelier de programmation vous montre comment afficher du texte immédiatement à l'aide de Font Face Observer.

Ajouter un observateur de cadran

Font Face Observer est un script qui détecte quand une police se charge. Le fichier fontfaceobserver.js a déjà été enregistré dans le répertoire du projet. Vous n'avez donc pas besoin de l'ajouter séparément. Vous devez toutefois ajouter une balise de script.

  • Cliquez sur Remixer pour modifier pour rendre le projet modifiable.
  • Ajoutez une balise de script pour fontfaceobserver.js à index.html:
  <div class="text">Some text.</div>
  <script src="fontfaceobserver.js" type="text/javascript"></script>
</body>

Utiliser Font Face Observer

Créer des observateurs

Créez un observateur pour chaque famille de polices utilisée sur la page.

  • Ajoutez le script suivant après le script fontfaceobserver.js. Cela crée des observateurs pour les familles de polices "Pacifico" et "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>

Si vous ne savez pas quels observateurs de polices de caractères vous devez créer, recherchez simplement les déclarations font-family dans votre CSS. Transmettez le nom font-family de ces déclarations à FontFaceObserver(). Il n'est pas nécessaire de créer un observateur de polices pour les polices de remplacement.

Par exemple, si votre code CSS était:

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

Vous devez ajouter FontFaceObserver('Times New Roman'). Times et Serif sont des polices de remplacement. Vous n'avez donc pas besoin de déclarer des FontFaceObservers pour elles.

Détecter le chargement de la police

Le code permettant de détecter le chargement d'une police se présente comme suit:

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

robotoObserver.load() est une promesse qui se résout lorsque la police se charge.

Le site de démonstration utilise deux polices différentes. Vous devez donc utiliser Promise.all() pour attendre que les deux polices soient chargées.

  • Ajoutez cette promesse à votre script, juste en dessous des FontFaceObservers que vous venez de déclarer:
Promise.all([
  pacificoObserver.load(),
  robotoObserver.load()
]).then(function(){
  /* Do things */
});

✔️ Enregistrement

Votre script devrait maintenant se présenter comme suit:

<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>

Appliquer la classe fonts-loaded

  • Remplacez le commentaire /* Do things */ dans le script par cette ligne:
document.documentElement.classList.add("fonts-loaded");

Cela ajoute la classe fonts-loaded à l'élément racine du document (la balise <html>) une fois les deux polices chargées.

✔️ Enregistrement

Votre script terminé doit se présenter comme suit:

<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>

Mettre à jour le CSS

Votre page doit être stylisée pour utiliser une police système au départ et des polices personnalisées une fois la classe fonts-loaded appliquée.

  • Mettez à jour le CSS:
.header {
html.fonts-loaded .header {
  font-family: 'Pacifico', cursive;
}

.text
html.fonts-loaded .text {
  font-family: 'Roboto', sans-serif;
}

Valider

  • Pour prévisualiser le site, appuyez sur Afficher l'application, puis sur Plein écran plein écran.

Si la page ressemble à celle-ci, cela signifie que vous avez correctement implémenté Font Face Observer et supprimé le "Flash de texte invisible".

Titre en police cursive.