Propriété CSS font-stretch

La propriété font-stretch élargit ou rétrécit le texte.

Cette propriété fait partie des propriétés CSS3.

La propriété font-stretch ne fonctionne pas sur n'importe quelle police ! Elle ne fonctionne que si la police de caractères possède des variantes de largeur. La propriété font-stretch seule ne permet pas d'étirer une police.

Cette propriété prend les valeurs suivantes :

ultra-condensed
extra-condensed
condensed
semi-condensed
normal
semi-expanded
expanded
extra-expanded
ultra-expanded
50% to 200%

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

css

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 :

Exemple de la propriété CSS font-stretch avec les valeurs ultra-condensed, extra-condensed, condensed, semi-condensed, normal, semi-expanded, expanded, extra-expanded, ultra-expanded, initial et inherit

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p {
        font-size: 4em;
        font-family: 'Myriad Pro';
      }
    </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>

Try it Yourself »

Sélection de la police de caractères

La police sélectionnée pour la valeur de la propriété font-stretch dépend des variantes prises en charge par la police concernée. S'il n'existe pas de variante correspondant à la valeur indiquée, les valeurs inférieures à 100 % mappent vers une variante plus étroite, et les valeurs supérieures ou égales à 100 % mappent vers une variante plus large.

Valeurs

Valeur	Description
ultra-condensed	Rétrécit le texte au maximum.
extra-condensed	Rétrécit significativement le texte, mais moins que `ultra-condensed`.
condensed	Rétrécit modérément le texte, mais moins que `extra-condensed`.
semi-condensed	Rétrécit légèrement le texte, mais moins que `condensed`.
normal	Aucun étirement n'est appliqué. Il s'agit de la valeur par défaut.
semi-expanded	Élargit légèrement le texte par rapport à `normal`.
expanded	Élargit modérément le texte par rapport à `semi-expanded`.
extra-expanded	Élargit significativement le texte par rapport à `expanded`.
ultra-expanded	Élargit le texte au maximum.
50% to 200%	Valeurs numériques représentant le facteur d'étirement.
initial	Définit la propriété sur sa valeur par défaut.
inherit	Hérite la propriété de l'élément parent.

Pratique

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

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

Propriété CSS font-stretch ​

Syntaxe ​

Exemple de la propriété font-stretch : ​

Sélection de la police de caractères ​