font-feature-settings

Syntaxe

/* Utilise les réglages par défaut */
font-feature-settings: normal;

/* Définir des valeurs pour les balises de fonctionnalités OpenType */
font-feature-settings: "smcp";
font-feature-settings: "smcp" on;
font-feature-settings: "swsh" 2;

Valeurs

Ce descripteur se spécifie soit par le mot-clé normal, soit par une liste de valeurs <feature-tag-value> séparées par des virgules. Lors du rendu du texte, la liste des valeurs OpenType <feature-tag-value> est transmise au moteur de mise en page pour activer ou désactiver des fonctionnalités de la police.

normal

Indique que le texte est mis en page avec les réglages par défaut de la police. C'est la valeur par défaut.

<feature-tag-value>

Représente un tuple séparé par un espace composé d'un nom de balise et d'une valeur optionnelle.

Le nom de balise est toujours une chaîne de caractères (<string>) de quatre caractères ASCII. Si le nom de balise comporte plus ou moins de caractères ou contient des caractères hors de l'intervalle U+20 à U+7E, le descripteur est invalide.

La valeur optionnelle peut être un entier positif ou le mot-clé on ou off. Les mots-clés on et off sont synonymes des valeurs 1 et 0 respectivement. Si aucune valeur n'est définie, la valeur par défaut est 1. Pour les fonctionnalités OpenType non booléennes (par exemple, les alternatives stylistiques ^(angl.)), la valeur indique le glyphe à sélectionner ; pour les fonctionnalités booléennes, la valeur active ou désactive la fonctionnalité.

Définition formelle

Syntaxe formelle

font-feature-settings = 
  normal                |
  <feature-tag-value>#  

<feature-tag-value> = 
  <opentype-tag> [ <integer [0,∞]> | on | off ]?  

<opentype-tag> = 
  <string>  

Exemples

Activer les glyphes ornés avec la règle @font-face

Dans cet exemple, le nom de balise swsh et la valeur booléenne 1 sont utilisés comme valeur du descripteur font-feature-settings dans la règle @font-face.

HTML

<p class="swash-off">Les ornements sont désactivés ici</p>
<p class="swash-on">Les ornements sont activés ici</p>

CSS

@font-face {
  font-family: MonteCarlo;
  src: url("/shared-assets/fonts/monte-carlo/monte-carlo-regular.woff2");
}
@font-face {
  font-family: MonteCarlo2;
  src: url("/shared-assets/fonts/monte-carlo/monte-carlo-regular.woff2");
  font-feature-settings: "swsh" 1;
}
p {
  font-size: 3rem;
  margin: 0.7rem 3rem;
}
.swash-off {
  font-family: MonteCarlo, cursive;
}
.swash-on {
  font-family: MonteCarlo2, cursive;
}

Résultat

La première ligne montre le design orné par défaut de la police MonteCarlo ^(angl.), et la seconde ligne montre les glyphes par défaut remplacés par des glyphes ornés ^(angl.).

Specifications

Compatibilité des navigateurs

Voir aussi

• Autres descripteurs @font-face : font-family, font-style, font-variation-settings, font-weight, src
• Propriétés de police associées : font-feature-settings, font-variant-alternates, font-variation-settings