La propriété CSS font-feature-settings
La propriété CSS font-feature-settings contrôle les fonctionnalités typographiques avancées des polices OpenType. Exemples et explications.
La propriété font-feature-settings vous donne un contrôle de bas niveau sur les fonctionnalités typographiques avancées intégrées aux polices OpenType — comme les petites majuscules, les chiffres elzéviriens, les ligatures, les fractions et les variantes stylistiques. Ces fonctionnalités sont conçues par le créateur de la police et stockées dans le fichier de police ; font-feature-settings est le commutateur qui les active ou les désactive.
La valeur est soit le mot-clé normal (la valeur par défaut), soit une liste de paires <feature-tag-value> séparées par des virgules. Chaque paire est un tag de fonctionnalité OpenType de quatre lettres écrit sous forme de chaîne, suivi éventuellement d'une valeur :
font-feature-settings: "smcp" 1; /* enable small caps */
font-feature-settings: "smcp" on; /* same thing — "on" means 1 */
font-feature-settings: "smcp", "onum"; /* two features, omitted value defaults to 1 */
font-feature-settings: "liga" 0; /* disable standard ligatures */Les mots-clés on et off sont synonymes de 1 et 0. La plupart des fonctionnalités sont de simples interrupteurs on/off, mais certaines (comme les ensembles stylistiques ou les variantes de caractères) acceptent un entier plus élevé pour sélectionner une variante spécifique. La fonctionnalité n'a d'effet visible que si la police rendue contient effectivement cette fonctionnalité — si la police ne la possède pas, la déclaration est ignorée silencieusement.
Quand l'utiliser (et quand ne pas l'utiliser)
font-feature-settings est la solution de dernier recours. Pour les besoins courants, préférez le raccourci de haut niveau font-variant et ses sous-propriétés (font-variant-caps, font-variant-numeric, font-variant-ligatures, …). Elles sont plus lisibles, héritées proprement et se dégradent gracieusement :
/* Preferred — high-level and readable */
font-variant-caps: small-caps;
/* Low-level equivalent — only when the font has no friendlier path */
font-feature-settings: "smcp";Recourez à font-feature-settings uniquement lorsque vous avez besoin d'une fonctionnalité qui n'a pas de mot-clé font-variant dédié — par exemple un ensemble stylistique propre à une police ("ss01") ou une fonctionnalité discrétionnaire exposée par tag.
Un piège important : font-feature-settings est tout ou rien. Comme la liste entière remplace toute valeur héritée, redéclarer cette propriété sur un élément enfant réinitialise chaque fonctionnalité définie sur le parent. Regroupez tous les tags que vous souhaitez activer dans une seule déclaration plutôt que de les répartir entre plusieurs règles.
Tags de fonctionnalités OpenType courants
| Tag | Fonctionnalité | Utilisation typique |
|---|---|---|
smcp | Petites majuscules | Affiche les lettres minuscules sous forme de petites capitales. |
c2sc | Majuscules en petites majuscules | Convertit également les lettres majuscules en petites majuscules. |
liga | Ligatures standard | Combine les paires de lettres comme fi, fl (activé par défaut ; mettre 0 pour désactiver). |
dlig | Ligatures discrétionnaires | Ligatures décoratives telles que ct, st. |
onum | Chiffres elzéviriens | Chiffres avec ascendantes/descendantes s'intégrant dans le texte courant. |
lnum | Chiffres alignés | Chiffres de hauteur uniforme alignés sur la hauteur des capitales. |
tnum | Chiffres tabulaires | Chiffres à largeur fixe pour les colonnes de nombres. |
frac | Fractions | Formate 1/2 comme une fraction typographique. |
kern | Crénage | Ajuste l'espacement entre des paires de lettres spécifiques. |
swsh | Ornements | Fioritures décoratives sur les glyphes. |
La prise en charge par les navigateurs est excellente dans les navigateurs modernes, mais pour les anciens moteurs, vous pouvez encore rencontrer les versions préfixées -webkit-, -moz- et -ms- de cette propriété.
| Valeur initiale | normal |
|---|---|
| S'applique à | Tous les éléments. S'applique également à ::first-letter et ::first-line. |
| Héritée | Oui. |
| Animable | Non. |
| Version | CSS3 |
| Syntaxe DOM | object.style.fontFeatureSettings = "normal"; |
Syntaxe
Syntaxe de la propriété CSS font-feature-settings
font-feature-settings: normal | <feature-tag-value># | initial | inherit;Exemple de la propriété font-feature-settings :
Exemple de la propriété CSS font-feature-settings avec la valeur smcp
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
h2 {
font-family: sans-serif;
}
h3 {
font-feature-settings: "smcp" 1;
}
</style>
</head>
<body>
<h2>Font-feature-settings example</h2>
<h3>The font-feature-settings CSS property controls advanced typographic features in OpenType fonts.</h3>
</body>
</html>Exemple avec plusieurs fonctionnalités
Vous pouvez activer plusieurs fonctionnalités à la fois avec une liste séparée par des virgules. Ici, nous activons les chiffres elzéviriens et désactivons les ligatures standard sur le même élément :
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
font-feature-settings: "onum" 1, "liga" 0;
}
</style>
</head>
<body>
<p>Order 1234567890 ships in office. </p>
</body>
</html>Notez que les chiffres ne changent que si la police choisie intègre des chiffres elzéviriens. Si une fonctionnalité est absente de la police, cette partie de la déclaration n'a aucun effet.
Valeurs
| Valeur | Description |
|---|---|
| normal | Il s'agit de la valeur par défaut de cette propriété. |
<feature-tag-value> | Lors du rendu du texte, la liste des valeurs de tags de fonctionnalités OpenType est transmise au moteur de mise en page pour activer ou désactiver les fonctionnalités de la police. |
| initial | Force la propriété à utiliser sa valeur par défaut. |
| inherit | La propriété hérite de la valeur de son élément parent. |
Propriétés associées
- font-variant — le raccourci de haut niveau qui devrait être votre premier choix pour les capitales, les ligatures et les chiffres.
- font-family — choisir une police qui contient réellement les fonctionnalités OpenType que vous souhaitez activer.
- text-transform — modifie la casse des caractères eux-mêmes, contrairement aux petites majuscules qui changent uniquement leur apparence.
- letter-spacing — ajuste l'espacement entre les caractères au niveau de la mise en page plutôt que via le crénage de la police.