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. 

Case à cocher permettant d’activer les fonctionnalités OpenType dans le projet web

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.

Ce produit est distribué sous licence Creative Commons Attribution - Pas d’utilisation commerciale - Partage à l’identique 3.0 non transposé  Les publications Twitter™ et Facebook ne sont pas couvertes par les dispositions Creative Commons.

Mentions légales   |   Politique de confidentialité en ligne