Propriété CSS font-stretch

La propriété CSS font-stretch sélectionne une face plus étroite ou plus large de la police actuelle, vous permettant de condenser ou d'élargir le texte sans modifier sa taille de police ni son épaisseur. C'est l'une des propriétés CSS3.

Ce qu'il faut comprendre, c'est que font-stretch n'étire pas les glyphes comme le ferait une transformation. Elle sélectionne uniquement une face de largeur alternative déjà incluse dans la police. Si la font-family ne possède pas de faces de largeur variable, la propriété n'a aucun effet visible et le texte conserve sa largeur normale. C'est pourquoi vous n'observerez un résultat qu'avec des polices proposant des variantes condensées/élargies (par exemple Myriad Pro, Roboto Condensed, ou une police variable avec un axe wdth).

Quand l'utiliser

Utilisez font-stretch lorsque :

Vous employez une famille de polices qui fournit plusieurs faces de largeur et souhaitez que le navigateur choisisse la bonne (plutôt que d'importer chaque face sous un nom font-family distinct).
Vous travaillez avec une police variable qui expose un axe de largeur (wdth) — les valeurs en pourcentage se mappent directement sur cet axe.

Pour du texte courant où la police n'a qu'une seule largeur, font-stretch ne fait rien ; ne comptez donc pas sur elle comme solution de repli pour faire entrer du texte dans une boîte.

Remarque : Dans la dernière spécification CSS Fonts, font-stretch a été renommée en font-width. Les navigateurs acceptent toujours font-stretch comme alias, donc le nom de propriété utilisé dans ce chapitre reste valide partout.

Valeurs

font-stretch accepte un mot-clé ou un pourcentage. Chaque mot-clé possède un pourcentage équivalent :

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%

Les pourcentages offrent un contrôle plus fin : toute valeur de 50% à 200% est autorisée, et avec une police variable vous pouvez utiliser des valeurs intermédiaires comme 90% ou 133%. Les valeurs inférieures à 100% sont plus étroites que la normale ; les valeurs supérieures à 100% sont plus larges.

Valeur initiale	normal
S'applique à	Tous les éléments. S'applique également à ::first-letter et ::first-line.
Héritée	Non
Animable	Oui.
Version	CSS3
Syntaxe DOM	object.style.fontStretch = "expanded";

Syntaxe

Syntaxe de la propriété CSS font-stretch

font-stretch: ultra-condensed | extra-condensed | condensed | semi-condensed | normal | semi-expanded | expanded | extra-expanded | ultra-expanded | 50% | 100% | 200% | initial | inherit;

Exemple de la propriété font-stretch

L'exemple ci-dessous applique chaque mot-clé à la même lettre. N'oubliez pas que vous ne verrez une différence que si la police rendue (Myriad Pro ici, avec un repli système) fournit effectivement ces faces de largeur.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p {
        font-size: 4em;
        font-family: 'Myriad Pro', sans-serif;
      }
    </style>
  </head>
  <body>
    <p>
      <span style="font-stretch: ultra-condensed">A</span>
      <span style="font-stretch: extra-condensed">A</span>
      <span style="font-stretch: condensed">A</span>
      <span style="font-stretch: semi-condensed">A</span>
      <span style="font-stretch: normal">A</span>
      <span style="font-stretch: semi-expanded">A</span>
      <span style="font-stretch: expanded">A</span>
      <span style="font-stretch: extra-expanded">A</span>
      <span style="font-stretch: ultra-expanded">A</span>
    </p>
  </body>
</html>

Essayez vous-même »

Utiliser un pourcentage avec une police variable

Avec une police variable qui expose un axe de largeur, vous pouvez demander n'importe quelle valeur dans la plage 50%–200%, y compris des largeurs intermédiaires :

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p {
        font-family: 'Roboto Flex', sans-serif;
        font-size: 2em;
      }
      .narrow { font-stretch: 75%; }
      .normal { font-stretch: 100%; }
      .wide   { font-stretch: 150%; }
    </style>
  </head>
  <body>
    <p class="narrow">Condensed text (75%)</p>
    <p class="normal">Normal text (100%)</p>
    <p class="wide">Expanded text (150%)</p>
  </body>
</html>

Comment la face est sélectionnée

La face choisie pour une valeur font-stretch donnée dépend des faces de largeur que la police propose réellement. Lorsqu'aucune face ne correspond exactement à la valeur demandée, le navigateur revient à la plus proche : les valeurs inférieures à 100% correspondent à la face la plus étroite disponible, et les valeurs égales ou supérieures à 100% correspondent à la face la plus large disponible.

Description des valeurs

Valeur	Description
ultra-condensed	Rétrécit le texte au maximum (50%).
extra-condensed	Rétrécit le texte considérablement, mais moins que `ultra-condensed` (62.5%).
condensed	Rétrécit le texte modérément, mais moins que `extra-condensed` (75%).
semi-condensed	Rétrécit le texte légèrement, mais moins que `condensed` (87.5%).
normal	Aucune face alternative n'est sélectionnée. C'est la valeur par défaut (100%).
semi-expanded	Élargit le texte légèrement par rapport à `normal` (112.5%).
expanded	Élargit le texte modérément par rapport à `semi-expanded` (125%).
extra-expanded	Élargit le texte considérablement par rapport à `expanded` (150%).
ultra-expanded	Élargit le texte au maximum (200%).
50% à 200%	Un pourcentage représentant le facteur d'étirement ; en dessous de 100% c'est plus étroit, au-dessus c'est plus large.
initial	Définit la propriété à sa valeur par défaut.
inherit	Hérite la propriété de l'élément parent.

Propriétés associées

font-weight — sélectionne l'épaisseur de la face de police.
font-style — sélectionne les faces normale, italique ou oblique.
font-variant — contrôle les petites capitales et autres glyphes alternatifs.
font-family — déclare quelle police (et ses faces) utiliser.
font — la propriété raccourcie pour définir plusieurs propriétés de police à la fois.

Pratique

Que fait la propriété CSS 'font-stretch' ?

Elle permet de modifier le rapport d'aspect des polices sans changer leur hauteur.Elle change la couleur de la police.Elle change la hauteur de la police.Elle permet de modifier la largeur des polices.