Valeur de font-display
Dernière mise à jour le
23 juin 2023
- Guide de l’utilisateur d’Adobe Fonts
- Introduction
- Attribution de licences pour les polices
- Attribution de licences pour les polices
- Gérer votre compte
- Attribution de licences pour les clients de Creative Cloud abonnement Entreprise
- Ajout de licences de police à votre compte
- Suppression de polices de la bibliothèque d’abonnement
- Adobe Fonts indisponible pour les Adobe ID enregistrés en Chine
- Pourquoi ces polices ne sont-elles pas incluses dans mon abonnement Creative Cloud ?
- Suppression de polices Morisawa septembre 2021
- Obtention et utilisation de polices
- Utilisation d’Adobe Fonts dans les applications Creative Cloud
- Gestion des polices
- Résolution des problèmes de polices manquantes dans les applications de bureau
- Utilisation des polices dans InDesign
- Polices et typographie
- Utilisation de polices web dans les documents Canvas HTML5
- Utilisation de polices dans InCopy
- Utilisation de polices web dans Muse
- Assemblage de fichiers de polices
- Guide de dépannage : ajout de polices
- Les polices ajoutées n’apparaissent pas dans le menu des polices
- « Impossible d’ajouter une ou plusieurs polices » ou « Une police avec le même nom est déjà installée »
- Que se passe-t-il si une police que j’utilise est mise à jour par la fonderie ?
- Conception et développement web
- Ajout de polices à votre site web
- Guide de dépannage : ajout de polices à un site web
- Résolution des problèmes de police
- Utilisation de polices web dans des bulletins d’information ou des courriers électroniques HTML
- Utilisation de polices web avec des pages AMP (Accelerated Mobile Pages)
- Sélecteurs CSS
- Personnalisation des performances des polices web avec les paramètres font-display
- Codes incorporés
- Jeu partiel dynamique et distribution de polices web
- Événements typographiques
- Pourquoi mes polices web proviennent-elles du réseau use.typekit.net ?
- Le site ne peut pas se connecter à use.typekit.net
- Utilisation de polices web avec CodePen
- Navigateurs et systèmes d’exploitation pris en charge
- Domaines
- Utilisation de polices web au cours d’un développement en local
- Politique de sécurité du contenu
- Impression de polices web
- Prise en charge linguistique et fonctionnalités OpenType
- Technologie des polices
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 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.
Remarque :
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.
Modifier le projet 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 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.
