---
title: '@font-feature-values'
slug: Web/CSS/@font-feature-values
tags:
  - CSS
  - Reference
  - Règle @
translation_of: Web/CSS/@font-feature-values
---
<div>{{CSSRef}}</div>

<p>La <a href="/fr/docs/Web/CSS/Règles_@">règle @</a> <strong><code>@font-feature-values</code></strong> permet aux auteurs d'utiliser un nom personnalisé dans une règle utilisant la propriété {{cssxref("font-variant-alternates")}} afin de régler finement les caractéristiques OpenType. Elle permet de simplifier les feuilles de style lorsqu'on utilise plusieurs polices.</p>

<pre class="brush: css">@font-feature-values Font One {
/* On active la caractéristique nice-style
   sur Font One */
  @styleset {
    nice-style: 12;
  }
}

@font-feature-values Font Two {
/* On active la caractéristique nice-style
   sur Font Two */
  @styleset {
    nice-style: 4;
  }
}

…
/* Indépendamment de la police */
.nice-look {
  font-variant-alternates: styleset(nice-style);
}
</pre>

<p>La règle @ <code>@font-feature-values</code> peut être utilisée au plus haut niveau d'une feuille de style et aussi au sein <a href="/fr/docs/Web/CSS/Règles_@" title="CSS/At-rule#Conditional_Group_Rules">d'un groupe de règles conditionnelles</a>.</p>

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

<h3 id="Blocs_liés_aux_caractéristiques">Blocs liés aux caractéristiques</h3>

<dl>
 <dt><a name="@swash"><code>@swash</code></a></dt>
 <dd>Indique le nom d'une caractéristique qui fonctionnera avec la notation fonctionnelle {{cssxref("font-variant-alternates", "swash()", "#swash()")}}. Une telle caractéristique est définie avec une seule valeur : <code>ident1: 2</code> est valide alors que <code>ident2: 2 4</code> est invalide.</dd>
 <dt><a name="@annotation"><code>@annotation</code></a></dt>
 <dd>Indique le nom d'une caractéristique qui fonctionnera avec la notation fonctionnelle {{cssxref("font-variant-alternates", "annotation()", "#annotation()")}}. Une telle caractéristique est définie avec une seule valeur : <code>ident1: 2</code> est valide alors que <code>ident2: 2 4</code> est invalide.</dd>
 <dt><a name="@ornaments"><code>@ornaments</code></a></dt>
 <dd>Indique le nom d'une caractéristique qui fonctionnera avec la notation fonctionnelle {{cssxref("font-variant-alternates", "ornaments()", "#ornaments()")}}. La caractéristique d'ornement est définie avec une seule valeur : <code>ident1: 2</code> est valide alors que <code>ident2: 2 4</code> est invalide.</dd>
 <dt><a name="@stylistic"><code>@stylistic</code></a></dt>
 <dd>Indique le nom d'une caractéristique qui fonctionnera avec la notation fonctionnelle {{cssxref("font-variant-alternates", "stylistic()", "#stylistic()")}}. Une telle caractéristique est définie avec une seule valeur : <code>ident1: 2</code> est valide alors que <code>ident2: 2 4</code> est invalide.</dd>
 <dt><a name="@styleset"><code>@styleset</code></a></dt>
 <dd>Indique le nom d'une caractéristique qui fonctionnera avec la notation fonctionnelle {{cssxref("font-variant-alternates", "styleset()", "#styleset()")}}. Plusieurs valeurs peuvent être utilisées pour cette caractéristique : <code>ident1: 2 4 12 1</code> correspondra aux valeurs OpenType <code>ss02</code>, <code>ss04</code>, <code>ss12</code>, <code>ss01</code>. Les valeurs supérieures à <code>99</code> sont valides mais ne correspondent à aucune valeur OpenType et sont donc ignorées.</dd>
 <dt><a name="@character-variant"><code>@character-variant</code></a></dt>
 <dd>Indique le nom d'une caractéristique qui fonctionnera avec la notation fonctionnelle {{cssxref("font-variant-alternates", "character-variant()", "#character-variant()")}}. Pour cette définition, on peut utiliser une ou deux valeurs : <code>ident1: 2</code>  correspond à <code>cv02=1</code> et <code>ident2: 2 4</code> correspond à  <code>cv02)4</code>, en revanche <code>ident2: 2 4 5</code> est invalide.</dd>
</dl>

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

{{csssyntax}}

<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('CSS3 Fonts', '#font-feature-values', '@font-feature-values')}}</td>
   <td>{{Spec2('CSS3 Fonts')}}</td>
   <td>Définition initiale.</td>
  </tr>
 </tbody>
</table>

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

<div class="hidden">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 <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>

<p>{{Compat("css.at-rules.font-feature-values")}}</p>

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

<ul>
 <li>La propriété {{cssxref("font-variant-alternates")}} qui utilise la valeur définie par cette règle @.</li>
</ul>