move *.html to *.md

1 files changed, 124 insertions, 0 deletions

diff --git a/files/fr/web/css/font-variant-alternates/index.md b/files/fr/web/css/font-variant-alternates/index.md
new file mode 100644
index 0000000000..02f1d94305
--- /dev/null
+++ b/files/fr/web/css/font-variant-alternates/index.md
@@ -0,0 +1,124 @@
+---
+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>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>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>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>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>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">
+   <p><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é.</p></div>
+ </dd>
+ <dt><code>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>
+
+{{csssyntax}}
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p&gt;MDN c'est là !&lt;/p&gt;
+&lt;p class="variant"&gt;MDN c'est là !&lt;/p&gt;
+</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>
+
+<p>{{Compat("css.properties.font-variant-alternates")}}</p>