font-stretch
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2017.
La propriété CSS font-stretch permet de choisir entre la forme normale, condensée ou étendue d'une police.
Exemple interactif
Syntaxe
/* 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: revert;
font-stretch: unset;
Cette propriété peut être définie avec un mot-clé ou avec une valeur exprimée en pourcentages (cf. <percentage>).
Valeurs
normal-
Permet de choisir une fonte normale.
semi-condensed,condensed,extra-condensed,ultra-condensed-
Permet de choisir une fonte plus resserrée que la normale,
ultra-condensedcorrespond à la forme la plus condensée. semi-expanded,expanded,extra-expanded,ultra-expanded-
Permet de choisir une fonte plus étendue que la normale,
ultra-expandedcorrespond à la forme la plus étirée. <percentage>-
Une valeur de type
<percentage>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é.
Dans les anciennes versions de la spécification de font-stretch, seuls les mots-clés étaient acceptés comme valeurs. Avec la spécification CSS Fonts 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. Pour les polices variables TrueType ou OpenType, c'est l'axe de variation wdth qui implémente ces largeurs variables. Attention toutefois à la compatibilité, car certains navigateurs ne prennent pas encore en charge cette fonctionnalité (cf. la section en fin d'article sur la compatibilité des navigateurs).
Correspondance entre les mots-clés et les valeurs numériques
Le tableau suivant indique les correspondances entre les valeurs sous la forme de mots-clés et celles exprimées en pourcentages :
| Mot-clé | 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% |
Description
Certaines polices possèdent différentes fontes pour lesquelles les caractères sont plus étroits (fontes condensées) et d'autres pour lesquelles les caractères sont plus amples (fontes étendues).
font-stretch 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.
Sélection de la fonte
La fonte sélectionnée pour une valeur font-stretch 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%.
Le tableau qui suit illustre l'effet des différents pourcentages avec deux polices possédant différentes fontes :
| 50% | 62.5% | 75% | 87.5% | 100% | 112.5% | 125% | 150% | 200% | |
|---|---|---|---|---|---|---|---|---|---|
| Helvetica Neue |  |
|
|
|
 |
|
|
|
|
| League Mono Variable | |
|
 |
 |
 |
 |
 |
 |
 |
- 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
font-stretchinférieures à 100% utilisent une fonte condensée alors que les autres valeurs utilisent la fonte normale. - League Mono Variable est une police variable qui offre plusieurs variantes de fontes sur cet axe et on peut alors observer les variations de
font-stretchselon les pourcentages choisis.
Syntaxe formelle
Error: could not find syntax for this item
Exemples
Avec un pourcentage
Spécifications
| Specification |
|---|
| CSS Fonts Module Level 4 # font-stretch-prop |
Compatibilité des navigateurs
BCD tables only load in the browser