font-stretch

Baseline Widely available

Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis septembre 2018.

Note : Le descripteur font-stretch a été renommé en font-width dans la spécification CSS Fonts ^(angl.). Pour préserver la compatibilité, la spécification conserve font-stretch comme alias obsolète pour le descripteur font-width.

Le descripteur CSS font-stretch permet aux auteur·ice·s de choisir entre la forme normale, condensée ou étendue d'une police fournie dans une règle @font-face.

Pour une famille de polices particulière, les auteur·ice·s peuvent télécharger différentes fontes correspondant aux différents styles de la même famille de polices, puis utiliser le descripteur font-stretch pour définir explicitement l'étirement de la fonte.

Syntaxe

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;

Le descripteur font-stretch peut prendre une seule valeur parmi celles de la liste ci-dessous.

Valeurs

normal: Définit une police normalement condensée.
semi-condensed, condensed, extra-condensed, ultra-condensed: Définit une forme plus condensée que la normale (la valeur ultra-condensed est à la forme la plus condensée).
semi-expanded, expanded, extra-expanded, ultra-expanded: Définit une forme plus étendue que la normale (la valeur ultra-expanded est à la forme la plus étendue).
<percentage>: Un pourcentage (une valeur de type <percentage>) dont la valeur est comprise entre 50% et 200% (inclus). Les valeurs négatives ne sont pas autorisées pour ce descripteur.

Dans les versions antérieures de la spécification pour font-stretch, le descripteur n'acceptait que les neuf valeurs de mots-clés. Le module CSS Fonts de niveau 4 étend la syntaxe pour accepter également une valeur <percentage>. Cela permet aux polices variables d'offrir une variation continue des largeurs des caractères. Pour les polices variables TrueType ou OpenType, la variation "wdth" est utilisée pour implémenter les largeurs variables.

Pour les polices variables TrueType et OpenType, c'est l'axe de variation "wdth" qui est utilisé afin d'implémenter les largeurs variables.

Si la police ne fournit pas une fonte correspondant exactement à la valeur donnée, les valeurs inférieures à 100% correspondent à une fonte condensée, et les valeurs supérieures ou égales à 100% correspondent à une fonte étendue.

Correspondance entre les noms et les pourcentages

Ce tableau indique les correspondances entre les valeurs indiquées par un mot-clé et celles définies avec un pourcentage :

Keyword	Pourcentage
`ultra-condensed`	50%
`extra-condensed`	62.5%
`condensed`	75%
`semi-condensed`	87.5%
`normal`	100%
`semi-expanded`	112.5%
`expanded`	125%
`extra-expanded`	150%
`ultra-expanded`	200%

Polices variables

La plupart des polices ont une largeur particulière qui correspond à l'une des valeurs de mot-clé. Cependant, les polices variables peuvent prendre en charge une gamme de largeurs avec une granularité fine, offrant au·à la concepteur·ice un degré de contrôle plus élevé sur la largeur choisie. Pour cela, les plages de pourcentages sont utiles.

Pour les polices variables TrueType ou OpenType, la variation wdth est utilisée pour implémenter des largeurs de glyphe variables.

Accessibilité

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 si le contraste des couleurs est trop faible.

Définition formelle

En lien avec les règles @	`@font-face`
Valeur initiale	`normal`
Valeur calculée	comme défini

Syntaxe formelle

font-width = 
  auto                 |
  <'font-width'>{1,2}  

<font-width> = 
  normal              |
  <percentage [0,∞]>  |
  ultra-condensed     |
  extra-condensed     |
  condensed           |
  semi-condensed      |
  semi-expanded       |
  expanded            |
  extra-expanded      |
  ultra-expanded

Exemples

Définir une plage de pourcentages pour `font-stretch`

L'exemple suivant utilise la police League Mono ^(angl.). Il synthétise différentes familles de polices à partir du même fichier de police en utilisant le descripteur font-stretch avec différents mots-clés et pourcentages.

html

<p>League Mono</p>
<p>League Mono</p>
<p>League Mono</p>

css

@font-face {
  font-family: "League Mono Ultra Condensed";
  src: url("/shared-assets/fonts/LeagueMono-VF.ttf") format("truetype");
  font-stretch: ultra-condensed; /* identique à 50% */
}

@font-face {
  font-family: "League Mono Normal";
  src: url("/shared-assets/fonts/LeagueMono-VF.ttf") format("truetype");
  font-stretch: 100%; /* identique à normal */
}

@font-face {
  font-family: "League Mono Ultra Expanded";
  src: url("/shared-assets/fonts/LeagueMono-VF.ttf") format("truetype");
  font-stretch: ultra-expanded; /* identique à 200% */
}

p:nth-child(1) {
  font-family: "League Mono Ultra Condensed", sans-serif;
}

p:nth-child(2) {
  font-family: "League Mono Normal", sans-serif;
}

p:nth-child(3) {
  font-family: "League Mono Ultra Expanded", sans-serif;
}

Spécifications

Specification
CSS Fonts Module Level 4 # font-stretch-desc

Compatibilité des navigateurs

Voir aussi

Le descripteur font-display
Le descripteur font-family
Le descripteur font-weight
Le descripteur font-style
Le descripteur font-feature-settings
Le descripteur font-variation-settings
Le descripteur src
Le descripteur unicode-range

Help improve MDN

Learn how to contribute

Cette page a été modifiée le 7 mars 2026 par les contributeurs du MDN.

View this page on GitHub • Report a problem with this content