La propriété font-stretch permet de choisir entre la forme normale, condensée ou étendue d'une police.

/* 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: 0%;
font-stretch: 50%;
font-stretch: 200%;

/* Valeurs globales */
font-stretch: inherit;
font-stretch: initial;
font-stretch: unset;

Certaines polices possèdent différentes fontes pour lesquelles les caractères sont moins espacés (fontes condensées) et d'autres pour lesquelles les caractères sont plus espacés (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.

Voir la section ci-après qui illustre l'effet de cette propriété sur certaines polices.

Syntaxe

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-condensed correspond à la forme la plus condensée.
semi-expanded, expanded, extra-expanded, ultra-expanded
Permet de choisir une fonte plus étendue que la normale, ultra-expanded correspond à la forme la plus étirée.
<percentage>
Une valeur de type <percentage> 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. Attention toutefois à la compatibilité car certains navigateurs ne prennent pas encore en charge cette fonctionnalité (cf. la section en fin d'article).

 

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%

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 pourcentage 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-stretch infé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-stretch selon les pourcentages choisis.

Pour les polices variables TrueType ou OpenType, c'est l'axe de variation wdth qui implémente ces largeurs variables.

Syntaxe formelle

<font-stretch-absolute>


<font-stretch-absolute> = normal | ultra-condensed | extra-condensed | condensed | semi-condensed | semi-expanded | expanded | extra-expanded | ultra-expanded | <percentage>

Exemples

Avec un mot-clé

HTML

<p class="stretch">Le texte est plus étiré.</p>
<p class="condensed">Le texte est plus resserré.</div>

CSS

.stretch {
  font-stretch: extra-expanded;
}

.condensed {
  font-stretch: condensed;
}

Résultat

Avec un pourcentage

Note : cet exemple ne fonctionnera uniquement avec les navigateurs qui prennent en charge les valeurs <percentage>.

HTML

<div class="container">
  <p class="condensed">an elephantine lizard</p>
  <p class="normal">an elephantine lizard</p>
  <p class="expanded">an elephantine lizard</p>
</div>

CSS

/*
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;
}

.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%;
}

Résultat

Spécifications

Spécification État Commentaires
CSS Fonts Module Level 4
La définition de 'font-stretch' dans cette spécification.
Version de travail Ajout des valeurs <percentage> pour les polices variables.
CSS Fonts Module Level 3
La définition de 'font-stretch' dans cette spécification.
Candidat au statut de recommandation Définition initiale.

Note : La propriété CSS font-stretch 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.

Valeur initialenormal
Applicabilitétous les éléments. S'applique aussi à ::first-letter et ::first-line.
Héritéeoui
Médiavisuel
Valeur calculéecomme spécifié
Type d'animationune font stretch
Ordre canoniquel'ordre unique et non-ambigu défini par la grammaire formelle

Compatibilité des navigateurs

FonctionnalitéChromeEdgeFirefoxInternet ExplorerOperaSafari
Support simple4812993511
<percentage> syntax Non ?61 Non ? ?
FonctionnalitéAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Support simple Non ?129 Non ? ?
<percentage> syntax Non Non ?61 Non ? ?

Étiquettes et contributeurs liés au document

Étiquettes : 
Contributeurs à cette page : SphinxKnight, fscholz, Sebastianz, teoli, GrCOTE7, FredB, Valacar, Mgjbot, Fredchat
Dernière mise à jour par : SphinxKnight,