Valeur de font-display
Dernière mise à jour le
11 juil. 2023
Découvrez comment utiliser les paramètres font-display pour modifier les performances des polices web.
Le paramètre font-display vous permet de spécifier la manière dont les polices web sont chargées dans le navigateur web et appliquées à votre site web. Il existe cinq options pour font-display :
|
|
Comportement |
|---|---|
|
Auto |
Permet au navigateur d’utiliser sa méthode par défaut pour charger la police. |
|
Block |
Masque le texte sur votre site web jusqu’à ce que la police web soit téléchargée. Les visiteurs de votre site web peuvent voir un flash de texte invisible ou FOIT avec cette option. |
|
Swap |
Affiche la police de secours que vous avez définie dans le fichier CSS en attendant que la police web soit téléchargée. Les visiteurs de votre site web peuvent voir un flash de texte non stylé ou FOUT avec cette option. |
|
Fallback |
Utilise le comportement de blocage pendant une courte période, puis passe au comportement de permutation et applique la police de secours au texte. Si les Web Fonts ne se sont pas chargées à la fin de la période d'échange, la police de repli reste utilisée. |
|
Optional |
Utilise le comportement de blocage pendant une courte période, puis applique la police de secours au texte. La valeur donne au navigateur web l'option de ne pas télécharger la police web du tout, par exemple, si le visiteur du site web dispose d'une connexion Internet lente. |
Pour plus de détails techniques sur font-display et les valeurs prises en charge, reportez-vous à la spécification CSS Fonts Module Level 4.
Annotation
Par défaut, les projets de polices web sont créés avec font-display défini sur auto.
Pour personnaliser le paramètre font-display, procédez comme suit :
Dans la page de vos projets web, cliquez sur Modifier le projet.
Sélectionnez une des valeurs font-display suivantes dans la barre latérale.Par défaut, le paramètre font-display des projets de polices web est défini sur auto.
Cliquez sur Enregistrer les modifications et la valeur de font-display est appliquée à votre site web en quelques minutes.
Le nouveau paramètre font-display est automatiquement inclus dans votre site web, dans le code intégré existant.
Mettre à jour des projets web existants
La prise en charge de font-display a été ajoutée au chargement des polices web d’Adobe en septembre 2020. Les projets web créés avant septembre 2020 ont été mis à jour pour utiliser le comportement par défaut font-display: auto .
Le paramètre font-display d’un projet existant peut être modifié en suivant les étapes ci-dessus. Une fois les modifications enregistrées, le nouveau paramètre font-display sera inclus dans votre site web, dans le code intégré existant. Vous n'avez pas besoin d'apporter de modifications au site web lui-même.
Découvrir Adobe Fonts
Trouvez la police parfaite pour tout projet web ou d’impression.
