initial commit

1 files changed, 183 insertions, 0 deletions

diff --git a/files/fr/web/css/@font-face/font-stretch/index.html b/files/fr/web/css/@font-face/font-stretch/index.html
new file mode 100644
index 0000000000..e7ab910e64
--- /dev/null
+++ b/files/fr/web/css/@font-face/font-stretch/index.html
@@ -0,0 +1,183 @@
+---
+title: font-stretch
+slug: Web/CSS/@font-face/font-stretch
+tags:
+  - '@font-face'
+  - CSS
+  - Descripteur
+  - Reference
+translation_of: Web/CSS/@font-face/font-stretch
+---
+<p>{{CSSRef}}{{draft}}</p>
+
+<p>Le descripteur CSS <strong><code>font-stretch</code></strong> permet aux auteurs de choisir entre la forme normale, condensée ou étendue d'une police fournie dans une règle {{cssxref("@font-face")}}.</p>
+
+<p>Pour une police donnée, les auteurs peuvent télécharger différentes fontes pour différents styles et utiliser alors <code>font-stretch</code> de façon explicite afin de choisir la fonte voulue. Les valeurs fournies au descripteur CSS sont les mêmes que celles qui peuvent être utilisées pour la propriété correspondante.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<pre class="brush: css">/* Valeurs simples */
+font-stretch: ultra-condensed;
+font-stretch: extra-condensed;
+font-stretch: condensed;
+font-stretch: semi-condensed;
+font-stretch: normal;
+font-stretch: semi-expanded;
+font-stretch: expanded;
+font-stretch: extra-expanded;
+font-stretch: ultra-expanded;
+font-stretch: 50%;
+font-stretch: 100%;
+font-stretch: 200%;
+
+/* Valeurs multiples */
+font-stretch: 75% 125%;
+font-stretch: condensed ultra-condensed;;
+</pre>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>normal</code></dt>
+ <dd>Indique la forme normale (en largeur) de la police.</dd>
+ <dt><code>semi-condensed</code>, <code>condensed</code>, <code>extra-condensed</code>, <code>ultra-condensed</code></dt>
+ <dd>Indique une forme plus condensée que la normale (la valeur <code>ultra-condensed</code> correspond à la forme la plus condensée).</dd>
+ <dt><code>semi-expanded</code>, <code>expanded</code>, <code>extra-expanded</code>, <code>ultra-expanded</code></dt>
+ <dd>Indique une forme plus étendue que la normale (la valeur <code>ultra-expanded</code> étant la plus étendue).</dd>
+ <dt><code>&lt;percentage&gt;</code></dt>
+ <dd>Un pourcentage (une valeur de type {{cssxref("&lt;percentage&gt;")}}) dont la valeur est comprise entre 50% et 200% (inclus). Les valeurs négatives ne sont pas autorisées pour cette propriété.</dd>
+</dl>
+
+<p>Dans les versions antérieures de la spécification pour <code>font-stretch</code>, la propriété ne s'utilisait qu'avec des mots-clés. Avec le module CSS Fonts de niveau 4, la syntaxe est étendue afin de permettre l'utilisation des valeurs <code>&lt;percentage&gt;</code>. Cela permet aux polices variables de permettre un contrôle plus fin voire continu.</p>
+
+<p>Pour les polices variables TrueType et OpenType, c'est l'axe de variation <code>"wdth"</code> qui est utilisé afin d'implémenter les largeurs variables.</p>
+
+<p>Si la police ne dispose pas d'une fonte avec une valeur exactement correspondantes, le moteur choisira la forme la plus proche disponible.</p>
+
+<h3 id="Correspondance_entre_les_noms_et_les_pourcentages">Correspondance entre les noms et les pourcentages</h3>
+
+<p>Ce tableau indique les correspondances entre les valeurs indiquées par un mot-clé et celles définies avec un pourcentage :</p>
+
+<table class="fullwidth-table standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Keyword</th>
+   <th scope="col">Pourcentage</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>ultra-condensed</code></td>
+   <td>50%</td>
+  </tr>
+  <tr>
+   <td><code>extra-condensed</code></td>
+   <td>62.5%</td>
+  </tr>
+  <tr>
+   <td><code>condensed</code></td>
+   <td>75%</td>
+  </tr>
+  <tr>
+   <td><code>semi-condensed</code></td>
+   <td>87.5%</td>
+  </tr>
+  <tr>
+   <td><code>normal</code></td>
+   <td>100%</td>
+  </tr>
+  <tr>
+   <td><code>semi-expanded</code></td>
+   <td>112.5%</td>
+  </tr>
+  <tr>
+   <td><code>expanded</code></td>
+   <td>125%</td>
+  </tr>
+  <tr>
+   <td><code>extra-expanded</code></td>
+   <td>150%</td>
+  </tr>
+  <tr>
+   <td><code>ultra-expanded</code></td>
+   <td>200%</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Polices_variables">Polices variables</h3>
+
+<p>La plupart des polices disposent de fontes avec des formes "séparées"/"discrètes". Toutefois, les polices variables permettent désormais d'utiliser des variations beaucoup plus fines (et c'est pour cela qu'on utilise les pourcentages).</p>
+
+<p>Pour les polices variables TrueType ou OpenType, c'est l'axe de variation <code>"wdth"</code> qui est utilisé afin d'implémenter les largeurs variables des glyphes.</p>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre>{{csssyntax}}
+</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<p>Dans l'exemple suivant, on charge une police Open Sans locale et on l'importe en ciblant les fontes avec les formes normale, semi-condensée et semi-étendue.</p>
+
+<pre class="brush: css">@font-face {
+  font-family: "Open Sans";
+  src: local("Open Sans") format("woff2"),
+       url("/fonts/OpenSans-Regular-webfont.woff") format("woff");
+  font-stretch: 87.5% 112.5%;
+}</pre>
+
+<h2 id="Accessibilité">Accessibilité</h2>
+
+<p>Les personnes atteintes de dyslexie ou d'autres troubles cognitifs pourront avoir des difficultés à lire des textes dont la fonte est trop condensée, notamment <a href="/en-US/docs/Web/CSS/color#Accessibility_concerns">si le contraste des couleurs est trop faible</a>.</p>
+
+<ul>
+ <li><a href="/fr/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">Comprendre les règles WCAG - Partie 1.4 (MDN)</a></li>
+ <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-visual-presentation.html" rel="noopener">Respecter le critère 1.4.8 - Comprendre les règles WCAG 2.0 (W3C)</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', '#font-prop-desc', 'font-stretch')}}</td>
+   <td>{{Spec2('CSS4 Fonts')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Fonts', '#font-prop-desc', 'font-stretch')}}</td>
+   <td>{{Spec2('CSS3 Fonts')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>
+
+<p>{{Compat("css.at-rules.font-face.font-stretch")}}</p>
+
+<h2 id="Voir_aussi">Voir aussi</h2>
+
+<ul>
+ <li>{{cssxref("@font-face/font-display", "font-display descriptor")}}</li>
+ <li>{{cssxref("@font-face/font-family", "font-family descriptor")}}</li>
+ <li>{{cssxref("@font-face/font-weight", "font-weight descriptor")}}</li>
+ <li>{{cssxref("@font-face/font-style", "font-style descriptor")}}</li>
+ <li>{{cssxref("@font-face/font-variant", "font-variant descriptor")}}</li>
+ <li>{{cssxref("font-feature-settings", "font-feature-settings")}}</li>
+ <li>{{cssxref("@font-face/font-variation-settings", "font-variation-settings")}}</li>
+ <li>{{cssxref("@font-face/src", "src")}}</li>
+ <li>{{cssxref("@font-face/unicode-range", "unicode-range descriptor")}}</li>
+</ul>