path: root/files/fr/web/css/font-stretch/index.html

---
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>