Évitez le flash de texte invisible.

Katie Hempenius
Katie Hempenius
X

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

Ajouter un observateur de visage de police

Font Face Observer est un script qui détecte le chargement d'une police. 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 un tag de script pour cela.

  • Cliquez sur Remix to Edit (Remixer pour modifier) pour rendre le projet modifiable.
  • Ajoutez un tag de script pour fontfaceobserver.js dans 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 visage de police vous devez créer, il vous suffit de rechercher 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 police pour les polices de remplacement.

Par exemple, si votre 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 FontFaceObservers pour ces polices.

Détecter le chargement de la police

Le code permettant de détecter un chargement de police se présente comme suit:

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

robotoObserver.load() est une promesse qui se résout lors du chargement de la police.

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 */
});

✔️ Point

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 la ligne suivante:
document.documentElement.classList.add("fonts-loaded");

La classe fonts-loaded est alors ajoutée à l'élément racine du document (la balise <html>) une fois les deux polices chargées.

✔️ Point

Votre script terminé devrait 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 avoir un style pour utiliser initialement une police système, puis 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 se présente comme suit, cela signifie que vous avez réussi à implémenter Font Face Observer et à vous débarrasser du "Flash of Invisible Text".

En-tête dans une police cursive.