Valeur de font-display
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 :
Valeur de 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 sans style 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 polices web n’ont pas été chargées avant la fin de la période de permutation, la police de secours continue à être utilisée. |
Optional |
Utilise le comportement de blocage pendant une courte période, puis applique la police de secours au texte. Cette valeur donne au navigateur web la possibilité de ne pas télécharger du tout la police web, par exemple si le visiteur du site dispose d’une connexion Internet trop 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.
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.
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 de manière à 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. Il n’est pas nécessaire de modifier le site web proprement dit.
Accéder à votre compte