font-feature-settings

Baseline Widely available

Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis ⁨avril 2017⁩.

La propriété font-feature-settings permet de contrôler les fonctionnalités typographiques des polices OpenType.

Exemple interactif

font-feature-settings: normal;

font-feature-settings: "liga" 0;

font-feature-settings: "tnum";

font-feature-settings: "smcp", "zero";

<section id="default-example">
  <div id="example-element">
    <p>Difficult waffles</p>
    <table>
      <tr>
        <td><span class="tabular">0O</span></td>
      </tr>
      <tr>
        <td><span class="tabular">3.14</span></td>
      </tr>
      <tr>
        <td><span class="tabular">2.71</span></td>
      </tr>
    </table>
  </div>
</section>

@font-face {
  font-family: "Fira Sans";
  src:
    local("FiraSans-Regular"),
    url("/shared-assets/fonts/FiraSans-Regular.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
}

section {
  font-family: "Fira Sans", sans-serif;
  margin-top: 10px;
  font-size: 1.5em;
}

#example-element table {
  margin-left: auto;
  margin-right: auto;
}

.tabular {
  border: 1px solid;
}

Note : Lorsque c'est possible, les auteurs devraient utiliser la propriété raccourcie 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

css

/* 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és on et off sont des synonymes respectifs des valeurs 1 et 0. Si aucune valeur n'est donnée pour une étiquette, la valeur par défaut sera 1. Pour les fonctionnalités OpenType qui ne sont pas booléennees, la valeur implique qu'un glyphe donné soit sélectionné.

Définition formelle

Valeur initiale	`normal`
Applicabilité	all elements and text. S'applique aussi à `::first-letter` et `::first-line`.
Héritée	oui
Valeur calculée	comme spécifié
Type d'animation	discrète

Syntaxe formelle

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

Exemples

css

/* 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

Specification
CSS Fonts Module Level 4 # font-feature-settings-prop

Compatibilité des navigateurs

Voir aussi

Help improve MDN

Learn how to contribute

Cette page a été modifiée le ⁨18 mars 2025⁩ par les contributeurs du MDN.

View this page on GitHub • Report a problem with this content