Guide d'utilisation Annuler

Événements typographiques

Rechercher

Dernière mise à jour le 1 mai 2021

Les événements typographiques sont inclus dans le chargement de la police JavaScript, utilisée pour le jeu partiel dynamique. Les événements typographiques permettent de personnaliser la page web en fonction du statut des polices : actives, en cours de chargement ou indisponibles pour une raison quelconque.

Les événements typographiques ne sont pas encore disponibles pour le chargement de polices CSS. Si vous utilisez le code incorporé CSS par défaut ou d’importation pour votre site web, vous pouvez inclure une autre bibliothèque JavaScript afin de personnaliser le chargement de votre police.

Utilisation d’événements typographiques dans CSS

Afin de mieux contrôler l’affichage de votre page tandis que les polices sont en cours de chargement ou sont inactives, le code incorporé JavaScript fournit un ensemble d’événements typographiques qui se déclenchent pendant le chargement des polices sur la page.

Il existe trois principaux événements, chacun correspondant à un nom de classe (entre parenthèses) :

loading (.wf-loading) : polices web en cours de chargement
active (.wf-active) : polices web actives
inactive (.wf-inactive) : polices web inactives

Les classes CSS associées à ces événements sont annexées à l’élément HTML durant le chargement. Vous pouvez les utiliser dans vos feuilles de style afin de contrôler le style de la page pendant le chargement des polices. Par exemple :

.wf-loading {
/* styles to use when web fonts are loading */
}

.wf-active {
/* styles to use when web fonts are active */
}

.wf-inactive {
/* styles to use when web fonts are inactive */
}

Les classes d’événements typographiques sont généralement utilisées pour contrôler le texte sans style qui apparaît brièvement (FOUT), et pour définir les polices de substitution et les styles pour les navigateurs qui ne prennent pas en charge les polices web ou dans lesquels elles sont désactivées. Il est généralement conseillé d’inclure des polices et des styles de substitution, car il peut arriver que les polices sur votre page soient inactives, en fonction de la combinaison du navigateur, du système d’exploitation et des préférences d’utilisateur.

Événements typographiques JavaScript

Ces événements typographiques sont également disponibles en tant que crochets de rappel JavaScript au moyen de la méthode Typekit.load. Vous pouvez transmettre un objet contenant des fonctions de rappel lorsque vous appelez Typekit.load ; ces fonctions de rappel seront invoquées tandis que différents événements typographiques se produiront en cours de chargement. Par exemple :

<script>
  try {
    Typekit.load({
      loading: function() {
        // JavaScript to execute when fonts start loading
      },
      active: function() {
        // JavaScript to execute when fonts become active
      },
      inactive: function() {
        // JavaScript to execute when fonts become inactive
      }
    })
  } catch(e) {}
</script>

Les rappels JavaScript peuvent être utilisés pour ajouter des éléments tels que des fondus pendant le chargement des polices ou encore pour exécuter un redimensionnement mathématique complexe des mises en page de présentation en fonction des dimensions du texte rendu.

Outre ces événements typographiques de base, d’autres événements plus détaillés pour les variations de polices individuelles sont également fournis. Les noms de classe de ces événements correspondent à une combinaison du nom de famille de polices, de la description de variation de police et d’un nom d’événement typographique. Ainsi, l’ajout de la pondération 400 normale de Gesta à un projet, par exemple, produit des classes d’événements typographiques du type wf-gesta-n4-loading et wf-gesta-n4-active. Par ailleurs, les rappels fontloading, fontactive et fontinactive JavaScript peuvent être utilisés pour recevoir la famille et la description de polices pour chaque variation.

Utilisation d’événements typographiques : gestion du texte sans style qui apparaît brièvement (FOUT)

Chaque navigateur gère le chargement des polices web à sa façon. Si un navigateur affiche initialement le texte avec une police de substitution, puis passe aux polices liées une fois le chargement terminé, il se peut qu’un texte sans style s’affiche brièvement (FOUT).

Pendant le chargement des polices, une classe .wf-loading est appliquée à l’élément HTML. Une fois les polices chargées, cette classe devient .wf-active.Vous pouvez, par exemple, ajouter ce qui suit à vos feuilles de style :

.wf-loading h1 {
/* styles to use while fonts are loading */
}

.wf-active h1 {
/* styles to use after fonts have loaded */
}

Vous pouvez alors adapter vos styles afin que le texte FOUT soit moins discordant, par exemple en vous assurant que la police du FOUT et la police web chargée aient la même taille. Vous pouvez aussi masquer le texte tant que la police n’est pas complètement chargée. Par exemple :

<style>
.wf-loading h1 {
font-family: "droid-sans";
visibility: hidden;
}
.wf-active h1 {
visibility: visible;
}
</style>

<body>
<h1>This headline will be hidden until Droid Sans is completely loaded.</h1>
</body>

La section sur la mise en forme des polices de substitution contient d’autres exemples sur la définition de styles CSS avec des événements typographiques.

Utilisation d’événements typographiques : mise en forme des polices de substitution

Les polices sont chargées en tant que ressources dans une page web, comme le sont les images ou les vidéos. Il peut arriver que certaines polices web ne soient pas chargées, selon la combinaison du système d’exploitation, du navigateur web, des extensions installées, des préférences utilisateur et de la vitesse de connexion. Dans ce cas, les polices de substitution de la pile CSS sont utilisées à la place.

Vous pouvez, par exemple, adapter la taille des polices de substitution lors de l’utilisation d’une police web condensée, afin que votre mise en page reste cohérente même lorsque les polices web ne sont pas chargées. Voici comment procéder :

.headline {
/* These fallback styles are used by default */
font-family: Arial, sans-serif;
font-size: 18px; /* Smaller size for non-condensed fallback font */
}

.wf-active .headline {
/* These styles are used when web fonts are active */
font-family: "proxima-nova-extra-condensed",Arial, sans-serif;
font-size: 24px;  /* Larger size for condensed font */
}

Utilisation d’événements typographiques : simulation du texte invisible apparaissant brièvement (FOIT) pour les projets dynamiques

Par défaut, les projets dynamiques restituent le texte en police web avec le texte sans style apparaissant brièvement (FOUT). En d’autres termes, le navigateur restitue les polices de substitution pendant le chargement des polices web, puis présente les polices web dès qu’elles sont disponibles. Cette approche diffère de l’autre méthode de rendu des polices web, selon laquelle un navigateur masque le texte pendant le téléchargement des polices web puis, une fois les polices web chargées, présente le texte avec le style de ces polices. Cette méthode est appelée FOIT (Flash Of Invisible Text).

La méthode FOUT rend les pages plus rapidement accessibles, en particulier sur les connexions réseau lentes. Cependant, si vous préférez l’approche FOIT, vous pouvez la simuler dans tous les navigateurs en utilisant les événements typographiques. Les événements typographiques se composent de trois classes ajoutées à l’élément :

.wf-loading : ajoutée pendant le chargement des polices
.wf-active : ajoutée quand au moins une police est chargée
.wf-inactive : ajoutée quand aucune des polices n’est chargée.

Vous pouvez utiliser ces trois classes dans votre code CSS afin de simuler le chargement FOIT en masquant le texte lorsque la classe wf-loading est active et en présentant le texte quand la classe wf-active ou wf-inactive est active :

.wf-loading {
/* styles to use when web fonts are loading */
}

.wf-active {
/* styles to use when web fonts are active */
}

.wf-inactive {
/* styles to use when web fonts are inactive */
}

Par exemple, si les éléments h1 et p utilisent une police web, utilisez ce code CSS pour les masquer pendant le chargement des polices.

.wf-loading h1, .wf-loading p {
visibility: hidden;
}

.wf-active h1, .wf-active p, .wf-inactive h1, .wf-inactive p {
visibility: visible;
}

Autres ressources similaires

Pourquoi mes polices web proviennent-elles du réseau use.typekit.net ?

Recevez de l’aide plus rapidement et plus facilement

Nouvel utilisateur ?