font-variation-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 septembre 2018.

La propriété CSS font-variation-settings permet de contrôler de façon fine les caractéristiques des polices variables en définissant les noms d'axes à quatre lettres des caractéristiques à faire varier ainsi que leurs valeurs.

Exemple interactif

font-variation-settings: "wght" 50;

font-variation-settings: "wght" 850;

font-variation-settings: "wdth" 25;

font-variation-settings: "wdth" 75;

<section id="default-example">
  <p id="example-element">
    ...il ne serait pas merveilleux de croiser un Mégalosaure, long d'une
    douzaine de mètres, se dandinant comme un lézard éléphantesque sur Holborn
    Hill.
  </p>
</section>

@font-face {
  src: url("/shared-assets/fonts/variable-fonts/AmstelvarAlpha-VF.ttf");
  font-family: "Amstelvar";
  font-style: normal;
}

p {
  font-size: 1.5rem;
  font-family: "Amstelvar", serif;
}

Syntaxe

css

/* Valeur pour les réglages par défaut */
font-variation-settings: normal;

/* Utilisation des valeurs pour les axes OpenType */
font-variation-settings: "XHGT" 0.7;

/* Valeurs globales */
font-variation-settings: inherit;
font-variation-settings: initial;
font-variation-settings: revert;
font-variation-settings: revert-layer;
font-variation-settings: unset;

Valeurs

normal: Le texte est disposé avec les caractéristiques par défaut.
<string> <number>: Lors de l'affichage du texte, les axes OpenType sont passés au moteur graphique afin d'activer ou de désactiver certaines fonctionnalités de la police. Chaque valeur est une chaîne de caractères (<string>) avec quatre caractères ASCII, suivie par un nombre (<number>) qui indique la valeur pour l'axe correspondant. Si la chaîne de caractères <string> a plus ou moins de 4 caractères et contient des caractères en dehors de l'intervalle U+20 - U+7E, la propriété sera considérée comme invalide. La valeur numérique <number> n'est pas nécessairement entière et positive, ce peut être un nombre décimal ou un nombre négatif.

Description

Cette propriété est un mécanisme de bas niveau conçu pour définir des fonctionnalités de polices variables lorsqu'il n'existe aucun autre moyen d'activer ou d'accéder à ces fonctionnalités. Vous ne devez l'utiliser que lorsqu'aucune propriété de base n'existe pour définir ces fonctionnalités (par exemple, font-weight, font-style).

Les caractéristiques de police définies avec font-variation-settings prévaudront toujours sur celles définies avec les propriétés de police de base correspondantes, par exemple font-weight, peu importe leur place dans la cascade. Dans certains navigateurs, cela n'est actuellement vrai que lorsque la déclaration @font-face inclut un intervalle font-weight.

Axes enregistrés et axes spécifiques

Les axes des polices variables sont rangés selon deux catégories : les axes enregistrés et les axes spécifiques.

Les axes enregistrés représentent les variations les plus fréquemment utilisées. Si ces axes sont suffisamment fréquents pour avoir été standardisés, cela ne signifie pas qu'un créateur de police doive tous les gérer pour créer une police.

Voici la liste des axes enregistrés et les propriétés CSS correspondantes, qui permettent de jouer sur ces axes :

Étiquette pour l'axe	Propriété
"wght"	`font-weight`
"wdth"	`font-stretch`
"slnt" (slant)	`font-style`: `oblique + angle`
"ital"	`font-style`: `italic`
"opsz"	`font-optical-sizing`

Les axes spécifiques peuvent correspondre à n'importe quel axe que le concepteur de la police souhaite faire varier (ce peut par exemple être la hauteur des hampes et des jambages, la taille des empattements ou tout autre chose). N'importe quel axe peut être utilisé tant qu'il a une étiquette unique sur quatre caractères. Il est possible que, si des axes spécifiques deviennent majoritairement présents, ils soient intégrés parmi les axes enregistrés.

Note : Les étiquettes des axes enregistrés sont écrits en minuscules et les axes spécifiques doivent être écrits en majuscules. On notera que rien n'oblige à suivre cette règle et qu'il est tout à fait possible que des concepteurs de polices donnent des étiquettes en minuscules à des axes spécifiques. Quoiqu'il en soit, on retiendra que les étiquettes des axes sont sensibles à la casse.

Pour utiliser les polices variables sur votre système d'exploitation, vous devez vous assurer qu'il est à jour. Par exemple, les systèmes Linux nécessitent la dernière version de Linux FreeType, et macOS avant 10.13 ne prend pas en charge les polices variables. Si votre système d'exploitation n'est pas à jour, vous ne pourrez pas utiliser les polices variables dans les pages web ou les outils de développement de Firefox.

Définition formelle

Valeur initiale	`normal`
Applicabilité	tous les éléments. S'applique aussi à `::first-letter` et `::first-line`.
Héritée	oui
Valeur calculée	comme spécifié
Type d'animation	une transformation

Syntaxe formelle

font-variation-settings = 
  normal                        |
  [ <opentype-tag> <number> ]#  

<opentype-tag> = 
  <string>

Exemples

Vous pouvez trouver d'autres exemples de polices variables dans notre guide sur les polices variables.

Contrôler la graisse variable de la police (`wght`)

Cliquez sur « Exécuter » dans les blocs de code ci-dessous pour éditer l'exemple dans le MDN Playground. Modifiez le CSS pour tester différentes valeurs de graisse. Observez ce qui se passe si vous indiquez une valeur hors de l'intervalle autorisé.

<div>
  <p class="p1">Graisse</p>
  <span>(font-weight: 625)</span>
</div>
<div>
  <p class="p2">Graisse</p>
  <span>(font-variation-settings: "wght" 625)</span>
</div>
<div class="adjustable">
  <p class="p3">Graisse</p>
  (font-variation-settings: "wght" <span id="angle-text">625</span>)<br />
  <label for="text-axis">Ajuster la graisse&nbsp;: </label>
  <input
    type="range"
    id="text-axis"
    name="text-axis"
    min="300"
    max="900"
    value="625" />
</div>

@font-face {
  font-family: "Amstelvar VF";
  src: url("https://mdn.github.io/shared-assets/fonts/variable-fonts/AmstelvarAlpha-VF.woff2")
    format("woff2-variations");
  font-weight: 300 900;
  font-stretch: 35% 100%;
  font-style: normal;
  font-display: swap;
}

p {
  font:
    1.2em "Amstelvar VF",
    "Georgia",
    serif;
  font-size: 4rem;
  margin: 1rem;
  display: inline-block;
}

.adjustable {
  border: 1px dashed;
  --text-axis: 625;
}

css

/* plage de graisse de 300 à 900 */
.p1 {
  font-weight: 625;
}

/* plage de graisse de 300 à 900 */
.p2 {
  font-variation-settings: "wght" 625;
}

/* Ajuster avec le curseur et la propriété personnalisée */
.p3 {
  font-variation-settings: "wght" var(--text-axis);
}

const angle = document.querySelector("#text-axis");
const text = document.querySelector("#angle-text");
const adjustable = document.querySelector(".adjustable");

angle.addEventListener("input", (e) => {
  const angle = e.target.value;
  text.innerText = angle;
  adjustable.style.setProperty("--text-axis", angle);
});

Contrôler l'inclinaison variable de la police (`slnt`)

Cliquez sur « Exécuter » dans les blocs de code ci-dessous pour éditer l'exemple dans le MDN Playground. Modifiez le CSS pour tester différentes valeurs d'inclinaison ou d'oblique.

<div>
  <p class="p1">Inclinaison</p>
  <span>(font-style: oblique 14deg)</span>
</div>
<div>
  <p class="p2">Inclinaison</p>
  <span>(font-variation-settings: 'slnt' 12)</span>
</div>
<div class="adjustable">
  <p class="p3">Inclinaison</p>
  (font-variation-settings: 'slnt' <span id="angle-text">5</span>)<br />
  <label for="text-axis">Ajuster l'inclinaison&nbsp;: </label>
  <input
    type="range"
    id="text-axis"
    name="text-axis"
    min="0"
    max="12"
    value="5" />
</div>

@font-face {
  font-family: "Roboto VF";
  src: url("https://mdn.github.io/shared-assets/fonts/variable-fonts/Roboto-VF.woff2")
    format("woff2-variations");
  font-weight: 100 900;
  font-stretch: 75% 100%;
  font-style: oblique 0deg 12deg;
  font-display: swap;
}

p {
  font:
    1.2em "Roboto VF",
    "Helvetica",
    sans-serif;
  font-size: 4rem;
  margin: 1rem;
  display: inline-block;
}

.adjustable {
  border: 1px dashed;
  --text-axis: 5;
}

css

/* plage d'inclinaison de 0deg à 12deg */
.p1 {
  font-style: oblique 14deg;
}

/* plage d'inclinaison de 0 à 12 */
.p2 {
  font-variation-settings: "slnt" 12;
}

/* Ajuster avec le curseur et la propriété personnalisée */
.p3 {
  font-variation-settings: "slnt" var(--text-axis);
}

const angle = document.querySelector("#text-axis");
const text = document.querySelector("#angle-text");
const adjustable = document.querySelector(".adjustable");

angle.addEventListener("input", (e) => {
  const angle = e.target.value;
  text.innerText = angle;
  adjustable.style.setProperty("--text-axis", angle);
});

Spécifications

Specification
CSS Fonts Module Level 4 # font-variation-settings-def

Compatibilité des navigateurs

Voir aussi

Guide sur les polices variables
Présentation des variations de polices OpenType ^(angl.) sur microsoft.com
Registre des axes de variation OpenType ^(angl.) sur microsoft.com
Polices variables OpenType ^(angl.) sur axis-praxis.org
Polices variables ^(angl.) sur v-fonts.com

Help improve MDN

Learn how to contribute

Cette page a été modifiée le 6 févr. 2026 par les contributeurs du MDN.

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