Join MDN and developers like you at Mozilla's View Source conference, 12-14 September in Berlin, Germany. Learn more at https://viewsourceconf.org

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

Les deux « e » appartienne à la même police. L'un est condensé et l'autre est normal.

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.

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.

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é
Animableoui, comme une font stretch
Ordre canoniquel'ordre unique et non-ambigu défini par la grammaire formelle

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

Spécification État Commentaires
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.

Compatibilité des navigateurs

Fonctionnalité Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Support simple 48.0 9.0 (9.0) 9.0 35.0 Pas de support
Fonctionnalité Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Support simple Pas de support 9.0 (9.0) ? Pas de support Pas de support

É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,