Guide d'utilisation Annuler

Personnalisation des performances des polices web avec les paramètres font-display

  1. Guide de l’utilisateur d’Adobe Fonts
  2. Introduction
    1. Conditions d’abonnement et configuration requise
    2. Navigateurs et systèmes d’exploitation pris en charge
    3. Activation de polices sur l’ordinateur
    4. Ajout de polices à votre site web
    5. Activation des polices sur CC Mobile
  3. Attribution de licences pour les polices
    1. Attribution de licences pour les polices
    2. Gérer votre compte
    3. Attribution de licences pour les clients de Creative Cloud abonnement Entreprise
    4. Ajout de licences de police à votre compte
    5. Suppression de polices de la bibliothèque d’abonnement
    6. Adobe Fonts indisponible pour les Adobe ID enregistrés en Chine
    7. Pourquoi ces polices ne sont-elles pas incluses dans mon abonnement Creative Cloud ?
    8. Suppression de polices Morisawa en septembre 2021
  4. Obtention et utilisation de polices
    1. Utilisation d’Adobe Fonts dans les applications Creative Cloud
    2. Gestion des polices
    3. Résolution des problèmes de polices manquantes dans les applications de bureau
    4. Utilisation des polices dans InDesign
    5. Polices et typographie
    6. Utilisation de polices web dans les documents Canvas HTML5
    7. Utilisation de polices dans InCopy
    8. Comment utiliser des polices dans Adobe Muse
    9. Utilisation de polices web dans Muse
    10. Assemblage de fichiers de polices
    11. Guide de dépannage : activation des polices
    12. Les polices actives ne sont pas ajoutées au menu Police
    13. « Impossible d’activer une ou plusieurs polices » ou « Une police portant le même nom est déjà installée »
    14. Que se passe-t-il si une police que j’utilise est mise à jour par la fonderie ?
  5. Conception et développement web
    1. Ajout de polices à votre site web
    2. Guide de dépannage : ajout de polices à un site web
    3. Utilisation de polices web dans des bulletins d’information ou des courriers électroniques HTML
    4. Utilisation de polices web avec des pages AMP (Accelerated Mobile Pages)
    5. Sélecteurs CSS
    6. Personnalisation des performances des polices web avec les paramètres font-display
    7. Codes incorporés
    8. Jeu partiel dynamique et distribution de polices web
    9. Événements typographiques
    10. Pourquoi mes polices web proviennent-elles du réseau use.typekit.net ?
    11. Le site ne peut pas se connecter à use.typekit.net
    12. Utilisation de polices web avec CodePen
    13. Navigateurs et systèmes d’exploitation pris en charge
    14. Domaines
    15. Utilisation de polices web au cours d’un développement en local
    16. Politique de sécurité du contenu
    17. Impression de polices web
  6. Prise en charge linguistique et fonctionnalités OpenType
    1. Prise en charge linguistique et jeux partiels
    2. Utilisation des fonctionnalités OpenType
    3. Syntaxe des fonctionnalités OpenType en CSS
  7. Technologie des polices
    1. Polices colorées OpenType-SVG
    2. Ten Mincho : remarques importantes concernant la mise à jour à partir de la version 1.000

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.

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 :

  1. Dans la page de vos projets web, cliquez sur Modifier le projet.

    Modifier le projet
    Modifier le projet

  2. 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.  

    paramètres font display

  3. 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. 

Logo Adobe

Accéder à votre compte