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