- 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
Les fonctionnalités OpenType sont comparables à des tiroirs secrets imbriqués dans des polices. Ouvrez-les pour découvrir comment modifier l’aspect et le comportement des polices, que ce soit de manière subtile ou saisissante. Toutes les fonctionnalités OpenType ne peuvent pas être utilisées en toute circonstance. Cependant, certaines d’entre elles sont essentielles pour obtenir des résultats typographiques étonnants.
Pour utiliser les fonctionnalités OpenType d’une police, vous devez les inclure dans le projet web, puis mettre en forme votre texte avec le code CSS requis. Consultez notre guide de syntaxe pour obtenir des exemples de chaque fonctionnalité avec du code à copier et coller dans votre feuille CSS.
Inclure des fonctionnalités OpenType dans votre projet
Pour inclure les fonctionnalités OpenType d’une police dans un projet web, consultez la page Projets web, puis cliquez sur le lien « modifier » du projet. Dans la section Jeu de caractères, cochez la case Fonctionnalités OpenType.
Une fois cette case activée, la liste des fonctionnalités disponibles pour cette famille de polices web spécifique est affichée : ligatures, caractères alternatifs, petites majuscules, etc.
La liste affiche les fonctionnalités OpenType disponibles dans l’ensemble des graisses et des styles de la famille. Si une fonctionnalité est incluse uniquement dans des graisses ou des styles spécifiques, elle ne figure pas dans la liste.
Vérification de la prise en charge des fonctionnalités utilisées dans le navigateur
Si la prise en charge des propriétés font-variant et font-feature-settings par le navigateur est insuffisante, il se peut que les fonctionnalités OpenType ne fonctionnent pas correctement dans tous les contextes qui vous intéressent.
La prise en charge est déroutante tant elle est disparate. Les versions plus récentes des navigateurs qui revendiquent une prise en charge s’accompagnent de restrictions et les navigateurs plus anciens qui ne prennent pas en charge les fonctionnalités OpenType peuvent littéralement se bloquer. Par défaut, Chrome n’active pas les fonctionnalités qui devraient pourtant l’être (comme les ligatures standard et les variantes contextuelles). Les versions macOS et iOS de Safari ignorent toute valeur font-feature-settings spécifiée, au lieu d’opter pour l’activation de quelques fonctionnalités par défaut. De plus, ces paramètres par défaut ne peuvent pas être modifiés. L’activation de quelques ensembles stylistiques pose problème avec certaines versions de Firefox (versions 15 et antérieures). Les polices web cessent de fonctionner lors de l’application des fonctionnalités OpenType dans Chrome 32 et versions antérieures.
-moz-font-feature-settings: "smcp"; -webkit-font-feature-settings: "smcp"; font-feature-settings: "smcp";
La prise en charge actuelle des navigateurs dépend fortement des préfixes vendeur. Vous trouverez, dans le document Syntaxe des fonctionnalités OpenType en CSS, du code rempli de propriétés avec préfixe vendeur ressemblant à l’exemple ci-dessus.
Mettre en forme du texte avec des fonctionnalités OpenType à l’aide du langage CSS
La syntaxe CSS d’activation des fonctionnalités OpenType est en constante évolution. Ce que vous devez savoir, c’est qu’il existe des propriétés de haut niveau et de bas niveau, et que l’héritage est un sujet relativement complexe.
La propriété CSS de bas niveau font-feature-settings bénéficie d’une prise en charge limitée dans les navigateurs via des préfixes vendeur. Cependant, son utilisation ne s’avère pas très flexible et ce, pour deux raisons. Tout d’abord, elle repose sur des balises de fonctionnalité OpenType à quatre caractères qu’il est difficile de mémoriser Ensuite, toutes les balises de fonctionnalité sont spécifiées dans une seule propriété, ce qui est loin d’être idéal. Voir aussi Syntaxe de fonctionnalités OpenType spécifiques et Syntaxe d’utilisation de plusieurs fonctionnalités OpenType.
La propriété CSS de haut niveau font-variant et ses sous-propriétés sont idéales, car elles utilisent des valeurs en langage naturel, telles que « small-caps » (petites majuscules) et « diagonal-fractions » (fractions diagonales). Le World Wide Web Consortium (W3C) souhaite que nous les utilisions lorsque cela s’avère possible, mais la prise en charge par les navigateurs est inexistante. Il est toutefois recommandé de se familiariser avec la syntaxe.
.class {
font-variant-caps: small-caps;
font-feature-settings: "smcp";
}
Nous utiliserons donc les propriétés font-variant et font-feature-settings, en tenant compte de la manière dont elles sont censées fonctionner. Nous préciserons d’abord la propriété font-variant facile à lire dans notre code CSS, comme dans l’exemple ci-dessus.
Héritage
font-feature-setting est une propriété de bas niveau, conçue pour des cas particuliers où elle constitue la seule manière d’accéder à un attribut typographique rarement utilisé. Elle remplacera donc font-variant, quel que soit l’ordre source. Nous vous recommandons cependant la plus grande prudence, car elle peut également se remplacer elle-même :
body {
font-variant-numeric: oldstyle-nums;
font-feature-settings: "onum";
}
.class {
font-variant-caps: small-caps;
font-feature-settings: "smcp"; /* disables onum from body declaration */
}
Toute valeur font-feature-settings héritée est écrasée lors de la nouvelle application de la propriété. Dans l’exemple ci-dessus, pour que petites majuscules (smcp) et chiffres arabes non alignés (onum) soient activés sur les éléments d’une classe, la valeur « onum » doit à nouveau être incluse, de sorte que l’on puisse réécrire la déclaration comme suit :
.class {
font-variant-caps: small-caps;
font-feature-settings: "onum", "smcp";
}
Valeurs font-feature-settings indexées
Certaines valeurs font-feature-settings sont légèrement plus complexes. Dans les exemples présentés jusqu’à présent, chaque valeur était une chaîne de caractères (ou une chaîne de caractères séparés par des virgules). La présence ou l’absence de balises de fonctionnalité, telles que « onum » et « smcp », est en quelque sorte un choix binaire : les fonctionnalités sont soit activées, soit désactivées.
Cela paraît logique. Cependant, qu’en est-il lorsque, par exemple, une police contient deux versions de type paraphe différentes de la lettre majuscule « A » ? Dans ce cas, on ne peut pas simplement activer les paraphes. Il convient d’activer les paraphes et d’en choisir un bien précis. Il est donc possible d’ajouter un indice numérique à la valeur, après la chaîne de caractères :
font-feature-settings: "swsh" 2;
Peut-être vous demandez-vous quel chiffre utiliser ici ? Combien de paraphes différents une police comporte-t-elle ? En fait, tout dépend de la police. L’utilisation de « 0 » signifie la désactivation de la fonctionnalité de paraphe. Cela vaut également pour les autres fonctionnalités qui utilisent des indices numériques, telles que les variantes stylistiques et les ensembles stylistiques.
Utilisation de plusieurs fonctionnalités OpenType
La propriété font-variant est l’abréviation CSS de toutes les sous-propriétés font-variant. Il est possible de procéder comme suit pour activer les ligatures standard et les chiffres arabes non alignés :
.class {
font-variant: common-ligatures, oldstyle-nums;
}
De même, plusieurs fonctionnalités peuvent être activées à l’aide de font-feature-settings avec une liste de valeurs séparées par des virgules :
.class {
font-feature-settings: "liga", "onum";
}
Dans ces deux cas, les valeurs héritées sont complètement écrasées et la prise en charge du navigateur peut varier. Pour rappel, les valeurs font-variant ont parfois été conçues pour activer plusieurs fonctionnalités simultanées (voir Majuscules en petites majuscules).
Ressources
Si vous êtes prêt à vous lancer dans la conception avec CSS, ajoutez un signet vers notre glossaire syntaxique des fonctionnalités OpenType fréquentes.
