font-stretch

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

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.

Note : 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 OS X, 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.

Si la police ne dispose pas de telles variations (par exemple Times New Roman sur Mac OS), font-stretch n'aura aucun effet visible :

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 globales */
font-stretch: inherit;
font-stretch: initial;
font-stretch: unset;

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.

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

normal | ultra-condensed | extra-condensed | condensed | semi-condensed | semi-expanded | expanded | extra-expanded | ultra-expanded

Exemples

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

Spécifications

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.

Compatibilité des navigateurs