initial commit

1 files changed, 286 insertions, 0 deletions

diff --git a/files/fr/web/css/font-stretch/index.html b/files/fr/web/css/font-stretch/index.html
new file mode 100644
index 0000000000..10ade6d4e5
--- /dev/null
+++ b/files/fr/web/css/font-stretch/index.html
@@ -0,0 +1,286 @@
+---
+title: font-stretch
+slug: Web/CSS/font-stretch
+tags:
+  - CSS
+  - Propriété
+  - Reference
+translation_of: Web/CSS/font-stretch
+---
+<div>{{CSSRef}}</div>
+
+<p>La propriété <strong><code>font-stretch</code></strong> permet de choisir entre la forme normale, condensée ou étendue d'une police.</p>
+
+<pre class="brush:css no-line-numbers notranslate">/* Valeurs avec un mot-clé */
+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;
+
+/* Valeurs en pourcentage */
+font-stretch: 50%;
+font-stretch: 100%;
+font-stretch: 200%;
+
+/* Valeurs globales */
+font-stretch: inherit;
+font-stretch: initial;
+font-stretch: unset;
+</pre>
+
+<p>Certaines polices possèdent différentes fontes pour lesquelles les caractères sont plus étroits (fontes <em>condensées</em>) et d'autres pour lesquelles les caractères sont plus amples (fontes <em>étendues</em>).</p>
+
+<p><code>font-stretch</code> permet de choisir entre les versions condensées ou étendues d'une police. Si la police utilisée ne possède pas de fonte utilisant cet axe de variation, elle n'aura aucun effet.</p>
+
+<p>Voir la section ci-après qui illustre l'effet de cette propriété sur certaines polices.</p>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+<p>Cette propriété peut être définie avec un mot-clé ou avec une valeur exprimée en pourcentages (cf. {{cssxref("&lt;percentage&gt;")}}).</p>
+
+<h3 id="Valeurs">Valeurs</h3>
+
+<dl>
+ <dt><code>normal</code></dt>
+ <dd>Permet de choisir une fonte normale.</dd>
+ <dt><code>semi-condensed</code>, <code>condensed</code>, <code>extra-condensed</code>, <code>ultra-condensed</code></dt>
+ <dd>Permet de choisir une fonte plus resserrée que la normale, <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>Permet de choisir une fonte plus étendue que la normale, <code>ultra-expanded</code> correspond à la forme la plus étirée.</dd>
+ <dt><code>&lt;percentage&gt;</code></dt>
+ <dd>Une valeur de type {{cssxref("&lt;percentage&gt;")}} entre 50% et 200% qui permet de définir la largeur de la police. Les valeurs négatives ne sont pas autorisées pour cette  propriété.</dd>
+</dl>
+
+<p>Dans les anciennes versions de la spécification de <code>font-stretch</code>, seuls les mots-clés étaient acceptés comme valeurs. Avec la spécification <em>CSS Fonts</em> de niveau 4, cette propriété peut également être définie avec un pourcentage. Cela permet d'obtenir un contrôle plus fin sur la largeur. Attention toutefois à la compatibilité car certains navigateurs ne prennent pas encore en charge cette fonctionnalité (cf. la section en fin d'article).</p>
+
+
+
+<h3 id="Correspondance_entre_les_mots-clés_et_les_valeurs_numériques">Correspondance entre les mots-clés et les valeurs numériques</h3>
+
+<p>Le tableau suivant indique les correspondances entre les valeurs sous la forme de mots-clés et celles exprimées en pourcentages :</p>
+
+<table class="fullwidth-table standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Mot-clé</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="Sélection_de_la_fonte">Sélection de la fonte</h3>
+
+<p>La fonte sélectionnée pour une valeur <code>font-stretch</code> dépend des fontes prises en charge par la police. Si la police ne fournit pas de fonte qui corresponde à la valeur exacte, le navigateur utilisera une fonte condensée si la valeur est inférieure à 100% et une fonte étendue si la valeur est supérieure à 100%.</p>
+
+<p>Le tableau qui suit illustre l'effet des différents pourcentage avec deux polices possédant différentes fontes :</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="row"></th>
+   <th scope="col">50%</th>
+   <th scope="col">62.5%</th>
+   <th scope="col">75%</th>
+   <th scope="col">87.5%</th>
+   <th scope="col">100%</th>
+   <th scope="col">112.5%</th>
+   <th scope="col">125%</th>
+   <th scope="col">150%</th>
+   <th scope="col">200%</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th scope="row">Helvetica Neue</th>
+   <td><img alt="" src="https://mdn.mozillademos.org/files/16039/Screenshot_2018-06-06_example_page.png" style="height: 59px; width: 45px;"></td>
+   <td><img alt="" src="https://mdn.mozillademos.org/files/16039/Screenshot_2018-06-06_example_page.png" style="height: 59px; width: 45px;"></td>
+   <td><img alt="" src="https://mdn.mozillademos.org/files/16039/Screenshot_2018-06-06_example_page.png" style="height: 59px; width: 45px;"></td>
+   <td><img alt="" src="https://mdn.mozillademos.org/files/16039/Screenshot_2018-06-06_example_page.png" style="height: 59px; width: 45px;"></td>
+   <td><img alt="" src="https://mdn.mozillademos.org/files/16040/Screenshot_2018-06-06_example_page1.png" style="height: 58px; width: 45px;"></td>
+   <td><img alt="" src="https://mdn.mozillademos.org/files/16040/Screenshot_2018-06-06_example_page1.png" style="height: 58px; width: 45px;"></td>
+   <td><img alt="" src="https://mdn.mozillademos.org/files/16040/Screenshot_2018-06-06_example_page1.png" style="height: 58px; width: 45px;"></td>
+   <td><img alt="" src="https://mdn.mozillademos.org/files/16040/Screenshot_2018-06-06_example_page1.png" style="height: 58px; width: 45px;"></td>
+   <td><img alt="" src="https://mdn.mozillademos.org/files/16040/Screenshot_2018-06-06_example_page1.png" style="height: 58px; width: 45px;"></td>
+  </tr>
+  <tr>
+   <th scope="row">League Mono Variable</th>
+   <td><img alt="" src="https://mdn.mozillademos.org/files/16030/Screenshot_2018-06-06_example_page.png" style="height: 58px; width: 45px;"></td>
+   <td><img alt="" src="https://mdn.mozillademos.org/files/16031/Screenshot_2018-06-06_example_page1.png" style="height: 58px; width: 45px;"></td>
+   <td><img alt="" src="https://mdn.mozillademos.org/files/16032/Screenshot_2018-06-06_example_page2.png" style="height: 58px; width: 45px;"></td>
+   <td><img alt="" src="https://mdn.mozillademos.org/files/16033/Screenshot_2018-06-06_example_page3.png" style="height: 58px; width: 45px;"></td>
+   <td><img alt="" src="https://mdn.mozillademos.org/files/16034/l-100.png" style="height: 58px; width: 45px;"></td>
+   <td><img alt="" src="https://mdn.mozillademos.org/files/16035/l-112.5.png" style="height: 58px; width: 45px;"></td>
+   <td><img alt="" src="https://mdn.mozillademos.org/files/16036/l-125.png" style="height: 58px; width: 45px;"></td>
+   <td><img alt="" src="https://mdn.mozillademos.org/files/16037/l-150.png" style="height: 58px; width: 45px;"></td>
+   <td><img alt="" src="https://mdn.mozillademos.org/files/16038/l-200.png" style="height: 58px; width: 45px;"></td>
+  </tr>
+ </tbody>
+</table>
+
+<ul>
+ <li>Helvetica Neue est installée par défaut sur macOS et possède une seule fonte condensée en plus de la fonte normale. On voit dans ce tableau que les valeurs de <code>font-stretch</code> inférieures à 100% utilisent une fonte condensée alors que les autres valeurs utilisent la fonte normale.</li>
+ <li><a href="http://tylerfinck.com/leaguemonovariable/">League Mono Variable</a> est une police variable qui offre plusieurs variantes de fontes sur cet axe et on peut alors observer les variations de <code>font-stretch</code> selon les pourcentages choisis.</li>
+</ul>
+
+<p>Pour les polices variables TrueType ou OpenType, c'est l'axe de variation <code>wdth</code> qui implémente ces largeurs variables.</p>
+
+<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Exemples">Exemples</h2>
+
+<h3 id="Avec_un_mot-clé">Avec un mot-clé</h3>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;p class="stretch"&gt;Le texte est plus étiré.&lt;/p&gt;
+&lt;p class="condensed"&gt;Le texte est plus resserré.&lt;/div&gt;</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css notranslate">.stretch {
+  font-stretch: extra-expanded;
+}
+
+.condensed {
+  font-stretch: condensed;
+}</pre>
+
+<h4 id="Résultat">Résultat</h4>
+
+<p>{{EmbedLiveSample('Avec_un_mot-clé', '500')}}</p>
+
+<h3 id="Avec_un_pourcentage">Avec un pourcentage</h3>
+
+<p>Note : cet exemple ne fonctionnera uniquement avec les navigateurs qui prennent en charge les valeurs <code>&lt;percentage&gt;</code>.</p>
+
+<div id="variable-font-demo">
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;div class="container"&gt;
+  &lt;p class="condensed"&gt;an elephantine lizard&lt;/p&gt;
+  &lt;p class="normal"&gt;an elephantine lizard&lt;/p&gt;
+  &lt;p class="expanded"&gt;an elephantine lizard&lt;/p&gt;
+&lt;/div&gt;
+</pre>
+
+<h4 id="CSS_2">CSS</h4>
+
+<pre class="brush: css notranslate">/*
+Cet exemple utilise la police League Mono Variable, développée par
+Tyler Finck (https://www.tylerfinck.com/) et utilisée ici selon
+la licence SIL Open Font, Version 1.1 :
+http://scripts.sil.org/cms/scripts/page.php?item_id=OFL_web
+*/
+
+@font-face {
+  src: url('https://mdn.mozillademos.org/files/16014/LeagueMonoVariable.ttf');
+  font-family:'LeagueMonoVariable';
+  font-style: normal;
+  font-stretch: 1% 500%; /* Nécessaire pour Chrome */
+}
+
+.container {
+  border: 10px solid #f5f9fa;
+  padding: 0 1rem;
+  font: 1.5rem 'LeagueMonoVariable', sans-serif;
+}
+
+.condensed {
+  font-stretch: 50%;
+}
+
+.normal {
+  font-stretch: 100%;
+}
+
+.expanded {
+  font-stretch: 200%;
+}
+
+</pre>
+</div>
+
+<h4 id="Résultat_2">Résultat</h4>
+
+<p>{{EmbedLiveSample("variable-font-demo", 1200, 250, "", "", "example-outcome-frame")}}</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('CSS4 Fonts', '#propdef-font-stretch', 'font-stretch')}}</td>
+   <td>{{Spec2('CSS4 Fonts')}}</td>
+   <td>Ajout des valeurs <code>&lt;percentage&gt;</code> pour les polices variables.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Fonts', '#propdef-font-stretch', 'font-stretch')}}</td>
+   <td>{{Spec2('CSS3 Fonts')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<div class="note">
+<p><strong>Note :</strong> La propriété CSS <code>font-stretch</code> fut d'abord définie par CSS 2, mais elle a été abandonnée avec CSS 2.1 par manque d'implémentation. Elle fut redéfinie avec CSS 3.</p>
+</div>
+
+<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-stretch")}}</p>