É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 la fonction Font Observateur.

Ajouter l'observateur de police des polices

Font Face Observer est un script. qui détecte le chargement d'une police. La 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 celui-ci.

  • Cliquez sur Remix to Edit (Remixer pour modifier) pour pouvoir modifier le projet.
  • Ajoutez un tag 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 du "Pacifico" et "Roboto" familles de polices:
  <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 n'êtes pas sûr des observateurs de police à créer, recherchez simplement les déclarations font-family de 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 polices de remplacement.

Par exemple, si votre CSS était:

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

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

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(). que les deux polices soient chargées.

  • Ajoutez cette promesse à votre script, juste en dessous des FontFaceObservers que vous 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

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

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

✔️ Enregistrement

Une fois terminé, votre script 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 de façon à utiliser au départ une police système, puis des polices personnalisées une seule fois. la classe fonts-loaded a été 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. Appuyez ensuite sur Plein écran plein écran

Si la page se présente comme suit, cela signifie que vous avez bien implémenté la police Observer et s'en débarrasser du "Flash of Invisible Text".

Un titre dans une police cursive.