La propriété font-feature-settings permet de contrôler les fonctionnalités typographiques des polices OpenType.
Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner https://github.com/mdn/interactive-examples et à envoyer une pull request !
Note : Lorsque c'est possible, les auteurs devraient utiliser la propriété raccourcie
Cette propriété est une fonctionnalité bas-niveau permettant de gérer des cas particuliers où il n'y a aucun moyen d'accéder à une fonctionnalité OpenType donnée. Cette propriété CSS ne devrait notamment pas être utilisée pour activer les petites majuscules.
font-variant ou l'une des propriétés détaillées correspondantes parmi font-variant-ligatures, font-variant-caps, font-variant-east-asian, font-variant-alternates, font-variant-numeric ou font-variant-position.Cette propriété est une fonctionnalité bas-niveau permettant de gérer des cas particuliers où il n'y a aucun moyen d'accéder à une fonctionnalité OpenType donnée. Cette propriété CSS ne devrait notamment pas être utilisée pour activer les petites majuscules.
Syntaxe
/* On utilise le réglage par défaut */ font-feature-settings: normal; /* On définit la valeur des étiquettes OpenType */ font-feature-settings: "smcp"; font-feature-settings: "smcp" on; font-feature-settings: "swsh" 2; font-feature-settings: "smcp", "swsh" 2; /* Valeurs globales */ font-feature-settings: inherit; font-feature-settings: initial; font-feature-settings: unset;
Valeurs
normal- Le texte est disposé en utilisant les réglages par défaut.
<feature-tag-value>- Lors du rendu du texte, l'étiquette de fonctionnalité OpenType est passée au moteur afin d'activer ou de désactiver certaines fonctionnalités de la police. L'étiquette est toujours une chaîne (type
<string>) de 4 caractères ASCII. Si la chaîne contient plus ou moins de 4 caractères ou contient des caractères en dehors de l'intervalle U+20 - U+7E, la déclaration sera considérée comme invalide.
La valeur associée à l'étiquette est un entier positif. Les deux mots-clésonetoffsont des synonymes respectifs des valeurs1et0. Si aucune valeur n'est donnée pour une étiquette, la valeur par défaut sera1. Pour les fonctionnalités OpenType qui ne sont pas booléennees, la valeur implique qu'un glyphe donné soit sélectionné.
Syntaxe formelle
normal | <feature-tag-value>#
Exemples
/* on utilise les glyphes alternatifs en small-cap */
.smallcaps { font-feature-settings: "smcp" on; }
/* on convertit les majuscules et minuscules en petites
capitales */
.allsmallcaps { font-feature-settings: "c2sc", "smcp"; }
/* on utilise les zéros barrés d'une barre oblique afin de
les différencier de "O" */
.nicezero { font-feature-settings: "zero"; }
/* on active les formes historiques */
.hist { font-feature-settings: "hist"; }
/* on désactive les ligatures communément utilisées */
.noligs { font-feature-settings: "liga" 0; }
/* on active les chiffres tabulaires (chasse fixe) */
td.tabular { font-feature-settings: "tnum"; }
/* on active les fractions automatiques */
.fractions { font-feature-settings: "frac"; }
/* on utilise le deuxième caractère de « swash » */
.swash { font-feature-settings: "swsh" 2; }
/* On active l'ensemble stylistique 7 */
.fancystyle {
font-family: Gabriola; /* Windows 7 et Mac OS */
font-feature-settings: "ss07";
}
Spécifications
| Spécification | État | Commentaires |
|---|---|---|
| CSS Fonts Module Level 3 La définition de 'font-feature-settings' dans cette spécification. |
Candidat au statut de recommandation | Définition initiale. |
| Valeur initiale | normal |
|---|---|
| Applicabilité | tous les éléments. S'applique aussi à ::first-letter et ::first-line. |
| Héritée | oui |
| Média | visuel |
| Valeur calculée | comme spécifié |
| Type d'animation | discrète |
| Ordre canonique | l'ordre unique et non-ambigu défini par la grammaire formelle |
Compatibilité des navigateurs
Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une pull request sur https://github.com/mdn/browser-compat-data.
Update compatibility data on GitHub
| Ordinateur | Mobile | ||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | Webview Android | Chrome pour Android | Edge Mobile | Firefox pour Android | Opera pour Android | Safari pour iOS | Samsung Internet | |
| Support simple | Chrome
Support complet
48
| Edge Support complet 15 | Firefox
Support complet
34
| IE Support complet 10 | Opera
Support complet
35
| Safari
Support complet
9.1
| WebView Android Support complet 4.4 | Chrome Android Support complet 48 | Edge Mobile Support complet Oui | Firefox Android
Support complet
34
| Opera Android Support complet Oui | Safari iOS
Support complet
9.3
| Samsung Internet Android Support complet 5.0 |
Légende
- Support complet
- Support complet
- Voir les notes d'implémentation.
- Voir les notes d'implémentation.
- Cette fonctionnalité nécessite un préfixe particulier ou utilise un autre nom.
- Cette fonctionnalité nécessite un préfixe particulier ou utilise un autre nom.