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;

Cette propriété ne modifie pas la géométrie de la police en l'étirant ou en la réduisant. Elle agit comme font-feature-settings ou comme font-variant et permet uniquement de choisir la meilleure fonte d'une police si celle-ci possède plusieurs déclinaisons.

Si la police propose différentes fontes, ce sera celle dont la géométrie sera la plus proche de font-stretch qui sera choisie. Par exemple, sur macOS, en plus des formes Bold, Regular, Italic et BoldItalic, la police Helvetica Neue offre un deuxième ensemble de fontes avec les caractères condensés : Condensed. Les navigateurs qui prennent en charge cette propriété font-stretch utiliseront cette forme condensée quand la propriété prendra des valeurs entre ultra-condensed et semi-condensed and, la fonte normale sera utilisée pour les autres valeurs.

Font-stretch results with a font having 2 faces, one condensed and one normal.

Si la police ne dispose pas de telles variations (par exemple Times New Roman sur Mac OS), font-stretch n'aura aucun effet visible :
Font-stretch results with a font having 1 single face.

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.

Syntaxe

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

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%

Interpolation

Les valeurs de font-stretch sont interpolées de façon discrète. L'interpolation se produit comme si les valeurs étaient ordonnées et à égale distance les unes des autres. Le résultat est arrondi à la valeur la plus proche et en cas de valeur intermédiaire, on prendra la valeur qui correspond à la forme la plus étirée.

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.

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
FonctionnalitéAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Support simple Non ?129 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,