--- title: font-variant-alternates slug: Web/CSS/font-variant-alternates tags: - CSS - Propriété - Reference translation_of: Web/CSS/font-variant-alternates --- <div>{{CSSRef}}</div> <p>La propriété <strong><code>font-variant-alternates</code></strong> contrôle l'utilisation de glyphes alternatifs. Ces glyphes peuvent être référencé par les noms définis avec la règle @ {{cssxref("@font-feature-values")}}.</p> <pre class="brush:css">/* Valeurs avec un mot-clé */ font-variant-alternates: normal; font-variant-alternates: historical-forms; /* Valeurs avec une notation fonctionnelle */ font-variant-alternates: stylistic(identifiant-utilisateur); font-variant-alternates: styleset(identifiant-utilisateur); font-variant-alternates: character-variant(identifiant-utilisateur); font-variant-alternates: swash(identifiant-utilisateur); font-variant-alternates: ornaments(identifiant-utilisateur); font-variant-alternates: annotation(identifiant-utilisateur); font-variant-alternates: swash(ident1) annotation(ident2); /* Valeurs globales */ font-variant-alternates: initial; font-variant-alternates: inherit; font-variant-alternates: unset; </pre> <p>Ces règles @ définissent les noms associés aux valeurs OpenType pour les différents types de glyphes alternatifs (<code>stylistic</code>, <code>styleset</code>, <code>character-variant</code>, <code>swash</code>, <code>ornament</code> ou <code>annotation</code>). Ces propriétés permettent d'utiliser des noms adaptés (définis avec {{cssxref("@font-feature-values")}}) dans la feuille de style.</p> <h2 id="Syntaxe">Syntaxe</h2> <p>Cette propriété peut être définie selon deux formes :</p> <ul> <li>la première avec le mot-clé <code>normal</code></li> <li>la seconde avec un ou plusieurs mots-clés parmi ceux listés ci-aprés. S'il y a plusieurs mots-clés, ils sont séparés par des espaces. Les mots-clés peuvent être dans n'importe quel ordre.</li> </ul> <h3 id="Valeurs">Valeurs</h3> <dl> <dt><code>normal</code></dt> <dd>Ce mot-clé désactive l'utilisation de tels glyphes alternatifs.</dd> <dt><code>historical-forms</code></dt> <dd>Ce mot-clé active l'affichage de formes historiques, c'est-à-dire des glyphes communs par le passé qui ne sont plus utilisés aujourd'hui. Cette valeur correspond à la valeur OpenType <code>hist</code>.</dd> <dt><code><a name="stylistic()"></a>stylistic()</code></dt> <dd>Cette fonction active l'affichage de formes stylistiques alternatives. Le paramètre passé à la fonction est un nom spécifique à la fonte associé à un nombre. Elle correspond à la valeur OpenType <code>salt</code>, par exemple <code>salt 2</code>.</dd> <dt><code><a name="styleset()"></a>styleset()</code></dt> <dd>Cette fonction active l'utilisation d'un ensemble de caractères d'un style alternatif. Le paramètre est un nom spécifique à la fonte, associé à un nombre. Elle correspond à la valeur OpenType <code>ssXY</code> (par exemple <code>ss02</code>).</dd> <dt><code><a name="character-variant()"></a>character-variant()</code></dt> <dd>Cette fonction active l'utilisation d'un ensemble de caractères stylistiques alternatifs. Elle est semblable à <code>styleset()</code> mais n'implique pas de cohérence entre les différents caractères. Avec cette valeur, les différents caractères peuvent avoir un style indépendant qui peut ne pas être cohérent. Le paramètre passé à la fonction est un nom lié à la fonte auquel est associé un nombre. Elle correspond à la valeur OpenType <code>cvXY</code> (par exemple <code>cv02</code>).</dd> <dt><code><a name="swash()"></a>swash()</code></dt> <dd>Cette fonction active l'affichage des glypes <a href="https://fr.wikipedia.org/wiki/Lettre_orn%C3%A9e">pour les lettres ornées</a>. Le paramètre passé à la fonction est un nom lié à la fonte auquel est associé un nombre. Elle correspond aux valeurs OpenType <code>swsh</code> et <code>cswh</code> (par exemple <code>swsh 2</code> ou <code>cswh 2</code>).</dd> <dt><code><a name="ornaments()"></a>ornaments()</code></dt> <dd>Cette fonction active l'affichage des ornements tels que les <a href="https://fr.wikipedia.org/wiki/Fleuron_(typographie)">fleurons</a> et autres casseaux. Le paramètre passé à la fonction est un nom lié à la fonte auquel est associé un nombre. Cette valeur correspond à la valeur OpenType <code>ornm</code> (par exemple <code>ornm 2</code>). <div class="note"><strong>Note : </strong>afin de préserver la sémantique de la fonte, les fondeurs sont invités à ne pas créer de casseaux qui correspondent aux caractères Unicode déjà définis comme variantes d'ornement pour la puce (U+2022). De nombreuses fontes passent outre cette règle et perdent ainsi en qualité.</div> </dd> <dt><code><a name="annotation()"></a>annotation()</code></dt> <dd>Cette fonction active l'affichage des annotations (telles que les chiffres entourés ou les caractères inversés). Le paramètre est un nom lié à la fonte auquel est associé un nombre. Cette valeur correspond à la valeur OpenType <code>nalt</code> (par exemple <code>nalt 2</code>).</dd> </dl> <h3 id="Syntaxe_formelle">Syntaxe formelle</h3> <pre class="syntaxbox">{{csssyntax}}</pre> <h2 id="Exemples">Exemples</h2> <h3 id="HTML">HTML</h3> <pre class="brush: html"><p>MDN c'est là !</p> <p class="variant">MDN c'est là !</p> </pre> <h3 id="CSS">CSS</h3> <pre class="brush: css">@font-feature-values "Leitura Display Swashes" { @swash { fancy: 1 } } p { font-size: 1.5rem; } .variant { font-family: Leitura Display Swashes; font-variant-alternates: swash(fancy); }</pre> <h3 id="Résultat">Résultat</h3> <p>Pour que cet exemple fonctionne, il faut avoir installé la fonte Open Type Leitura Display Swashes. Une version de test est disponible sur <a href="https://fontsgeek.com">fontsgeek.com</a>.</p> <p>{{EmbedLiveSample('Exemples', '', '', '', 'Web/CSS/font-variant-alternates')}}</p> <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', '#propdef-font-variant-alternates', 'font-variant-alternates')}}</td> <td>{{Spec2('CSS3 Fonts')}}</td> <td>Définition initiale.</td> </tr> </tbody> </table> <p>{{cssinfo}}</p> <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.properties.font-variant-alternates")}}</p>