La propriété CSS font-display permet de contrôler l'affichage des polices web pendant leur chargement. Il existe plusieurs valeurs possibles pour cette propriété qui peuvent être utilisées selon les besoins de votre projet.
Les différentes valeurs de font-display
auto (par défaut) : Le navigateur décide de la meilleure façon d'afficher le texte pendant le chargement de la police.
La valeur "auto" pour la propriété font-display permet au navigateur de décider de la meilleure façon d'afficher le texte pendant le chargement de la police. Il peut utiliser une police de substitution ou afficher un élément vide avant de charger la police web.
Cette valeur peut être utile lorsque vous ne voulez pas intervenir dans la stratégie de chargement de police utilisée par le navigateur, mais elle peut également entraîner des problèmes d'affichage pour les utilisateurs si la police de substitution est différente de celle que vous utilisez dans votre design.
Block : Le texte est affiché en utilisant une police de substitution jusqu'à ce que la police web soit chargée.
Cette valeur indique au navigateur de bloquer l'affichage du texte tant que la police web n'a pas été chargée. Cela peut garantir que l'affichage de la police web souhaitée est utilisé, mais peut entraîner des retards dans l'affichage du contenu et une mauvaise expérience utilisateur.
Il est généralement préférable d'utiliser une valeur telle que "swap" ou "fallback" qui permet à l'utilisateur de voir le contenu plus rapidement, tout en utilisant une police de substitution pour l'affichage temporaire.
Swap : Le texte est affiché en utilisant une police de substitution, puis remplacé par la police web une fois chargée.
Exactement, "swap" signifie que le navigateur utilisera une police de substitution pour afficher le texte jusqu'à ce que la police web soit chargée, puis il remplacera la police de substitution par la police web une fois qu'elle est chargée.
Cela permet de s'assurer que le texte est toujours lisible pendant le chargement de la police web, mais qu'il sera affiché avec la police souhaitée une fois qu'elle sera disponible.
Fallback : Le texte est affiché en utilisant la police web, mais avec des styles de substitution s'il n'est pas encore chargé.
La valeur "fallback" pour la propriété CSS font-display permet de spécifier que le navigateur doit afficher le texte en utilisant la police web, mais avec des styles de substitution s'il n'est pas encore chargé.
Cela signifie que le navigateur utilisera une police de substitution pour afficher le texte pendant le chargement de la police web, et remplacera cette police de substitution une fois que la police web a été chargée.
Cela permet de garantir une meilleure expérience utilisateur en évitant les flashes de contenu vide pendant le chargement de la police web.
Optional : Le texte est affiché en utilisant la police web si elle est déjà chargée dans le navigateur, sinon il utilise une police de substitution.
La valeur "optional" de la propriété CSS font-display permet au navigateur de choisir s'il utilise la police web ou une police de substitution en fonction de si la police web est déjà chargée ou non dans le navigateur.
Si la police web est déjà chargée, elle sera utilisée pour afficher le texte. Sinon, une police de substitution sera utilisée. Cela permet de réduire les temps de chargement et d'améliorer l'expérience utilisateur en utilisant des polices déjà présentes dans le navigateur pour afficher le texte.
Cela peut être utile pour les sites web qui utilisent des polices web uniques qui ne sont pas fréquemment utilisées sur d'autres sites web.
Comment utiliser font-display dans votre feuille de style
Pour utiliser cette propriété, vous devez l'ajouter à la déclaration de police dans votre feuille de style, comme ceci :
En utilisant la propriété CSS font-display, vous pouvez améliorer l'expérience utilisateur en garantissant que le contenu est toujours visible pendant le chargement des polices web.
La valeur "swap" permet au navigateur de remplacer temporairement le texte en utilisant une police de substitution jusqu'à ce que la police web soit chargée. Cela garantit que le contenu reste lisible pour l'utilisateur, même si la police web prend un peu de temps à charger.
Il est important de choisir la valeur appropriée en fonction des besoins de votre projet pour garantir une expérience utilisateur optimale.
/* Utilisation de la police dans les éléments */body {font-family: 'NomDeLaPolice', sans-serif;}...
Il est important de noter que la propriété font-display ne fonctionne qu'avec les polices web (chargées via @font-face) et qu'elle ne sera pas prise en compte pour les polices système installées sur l'ordinateur de l'utilisateur.
Il est également important de tester différentes valeurs de font-display pour déterminer celle qui convient le mieux à votre projet et à votre public cible, car chaque valeur peut avoir des conséquences différentes sur les performances et l'expérience utilisateur.
Enregistrer un commentaire