---
title: font-variation-settings
slug: Web/CSS/font-variation-settings
tags:
  - CSS
  - Propriété
  - Reference
translation_of: Web/CSS/font-variation-settings
---
<div>{{CSSRef}}</div>

<p>La propriété CSS <strong><code>font-variation-settings</code></strong> permet de contrôler les caractéristiques typographiques de bas niveau OpenType ou TrueType en utilisant les quatres lettres représentant les axes des caractéristiques qu'on souhaite faire varier, ainsi que les valeurs pour les variations associées.</p>

<div>{{EmbedInteractiveExample("pages/css/font-variation-settings.html")}}</div>

<p class="hidden">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 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>

<p>Cette propriété fonctionne à un niveau plus bas que {{cssxref("font-feature-settings")}} qui permet de définir les valeurs et les étiquettes (<em>tags</em>) pour les caractéristiques des polices.</p>

<div class="note"><strong>Note : </strong>Si possible, les auteurs web devraient utiliser d'autres méthodes pour contrôler l'affichage des polices de caractères et notamment la propriété raccourcie {{cssxref("font-variant")}} ou une des propriétés détaillée associée. Cette propriété est une fonctionnalité de bas niveau destinée à gérer les cas spécifiques pour lesquels il est autrement impossible d'activer ou de paramétrer une caractéristique OpenType existante.</div>

<div class="note"><strong>Note :</strong> Les caractéristiques définies avec <code>font-variation-settings</code> l'emporteront sur celles définies par les autres propriétés relatives aux polices (ex. <code>font-weight</code>), où qu'elles soient dans la cascade. Pour certains navigateurs, cela se vérifie uniquement lorsque la déclaration <code>@font-face</code> inclut un intervalle <code>font-weight</code>.</div>

<h2 id="Syntaxe">Syntaxe</h2>

<pre class="brush:css no-line-numbers">/* 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: unset;
</pre>

<p>La valeur de cette propriété peut être définie selon deux formes :</p>

<ul>
 <li>Avec le mot-clé <code>normal</code></li>
 <li>Ou avec une chaîne de caractères (<code>&lt;string&gt;</code>) suivi d'un nombre (<code>&lt;number&gt;</code>). Ce motif peut être répété tant qu'une virgule sépare chacun des tuples.</li>
</ul>

<h3 id="Valeurs">Valeurs</h3>

<dl>
 <dt><code>normal</code></dt>
 <dd>Le texte est disposé avec les caractéristiques par défaut.</dd>
 <dt><code>&lt;string&gt; &lt;number&gt;</code></dt>
 <dd>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 (type {{cssxref("&lt;string&gt;")}}) avec quatre caractères ASCII, suivie par un nombre (type {{cssxref("number")}}) qui indique la valeur pour l'axe correspondant. Si la chaîne de caractères <code>&lt;string&gt;</code> 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 <code>&lt;number&gt;</code> n'est pas nécessairement entière et positive, ce peut être un nombre décimal ou un nombre négatif.</dd>
</dl>

<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>

<pre class="syntaxbox">{{csssyntax}}</pre>

<h2 id="Axes_enregistrés_et_axes_spécifiques">Axes enregistrés et axes spécifiques</h2>

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

<p>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.</p>

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

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Étiquette pour l'axe</th>
   <th scope="col">Propriété</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>"wght"</td>
   <td>{{cssxref("font-weight")}}</td>
  </tr>
  <tr>
   <td>"wdth"</td>
   <td>{{cssxref("font-stretch")}}</td>
  </tr>
  <tr>
   <td>"slnt" (slant)</td>
   <td>{{cssxref("font-style")}}: <code>oblique + angle</code></td>
  </tr>
  <tr>
   <td>"ital"</td>
   <td>{{cssxref("font-style")}}: <code>italic</code></td>
  </tr>
  <tr>
   <td>"opsz"</td>
   <td>
    <p>{{cssxref("font-optical-sizing")}}</p>
   </td>
  </tr>
 </tbody>
</table>

<p>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.</p>

<div class="note">
<p><strong>Note </strong>: 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.</p>
</div>

<h2 id="Exemples">Exemples</h2>

<div class="warning">
<p><strong>Attention !</strong> Afin de pouvoir utiliser les polices variables, votre système d'exploitation doit être à jour et votre navigateur doit prendre en charge ces fonctionnalités. Ainsi, les systèmes basés sur Linux requièrent la dernière version de Linux Freetype et les systèmes macOS antérieurs à 10.13 ne prennent pas en charge les polices variables.</p>
</div>

<h3 id="Graisse_(wght)">Graisse (<code>wght</code>)</h3>

<p>L'exemple suivant peut être édité afin de voir l'effet de la modification des valeurs pour la graisse du texte.</p>

<div>{{EmbedGHLiveSample("css-examples/variable-fonts/weight.html", '100%', 520)}}</div>

<h3 id="Pente_(slnt)">Pente (<code>slnt</code>)</h3>

<p>L'exemple suivant peut être édite afin de voir l'effet de la modification des valeurs pour la pente (à ne pas confondre avec l'italique) du texte.</p>

<div>{{EmbedGHLiveSample("css-examples/variable-fonts/slant.html", '100%', 520)}}</div>

<h3 id="Autres_exemples">Autres exemples</h3>

<ul>
 <li><a href="/fr/docs/Web/CSS/CSS_Fonts/Guide_polices_variables">Guide sur les polices variables</a></li>
 <li><a href="https://v-fonts.com">v-fonts.com</a></li>
 <li><a href="https://axis-praxis.org">axis-praxis.org</a></li>
</ul>

<h2 id="Spécifications">Spécifications</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Spécification</th>
   <th scope="col">État</th>
   <th scope="col">Commentaires</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('CSS4 Fonts', '#low-level-font-variation-settings-control-the-font-variation-settings-property', 'font-variation-settings')}}</td>
   <td>{{Spec2('CSS4 Fonts')}}</td>
   <td>Définition initiale.</td>
  </tr>
 </tbody>
</table>

<p>{{cssinfo}}</p>

<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>

<p class="hidden">Pour contribuer à ces données de compatibilité, vous pouvez envoyer une <em>pull request</em> sur ce dépôt: <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p>

<p>{{Compat("css.properties.font-variation-settings")}}</p>

<h2 id="Voir_aussi">Voir aussi</h2>

<ul>
 <li><a href="/fr/docs/Web/CSS/CSS_Fonts/Guide_polices_variables">Guide sur les polices variables</a></li>
 <li><a href="https://www.microsoft.com/typography/otspec180/otvaroverview.htm">OpenType Font Variations Overview</a></li>
 <li><a href="https://www.microsoft.com/typography/otspec180/default.htm">OpenType specification</a></li>
 <li><a href="https://www.microsoft.com/typography/otspec/dvaraxisreg.htm">OpenType Design-Variation Axis Tag Registry</a></li>
</ul>