w3docs logo

Propriété CSS font-stretch

La propriété font-stretch permet de rendre le texte plus étroit ou plus large.

La propriété font-stretch ne fonctionnera pas sur n'importe quelle police! Elle fonctionnera seulement si la famille de police a width-variant faces. La propriété font-stretch elle-même étend une police.

Cetta propriété a les valeurs suivantes:

  • font-stretch:
  • ultra-condensed
  • extra-condensed
  • condensed
  • semi-condensed
  • normal
  • semi-expanded
  • expanded
  • extra-expanded
  • ultra-expanded
Valeur initiale normal
Appliquée à Tous les éléments. Elle est aussi appliquée aux éléments pseudos ::first-letter et ::first-line.
Héritée Oui.
Animable Oui.
Version CSS3
Syntaxe DOM object.style.fontStretch = "expanded";

Syntaxe

font-stretch: ultra-condensed | extra-condensed | condensed | semi-condensed | normal | semi-expanded | expanded | extra-expanded | ultra-expanded | initial | inherit;

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du 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>

Valeurs

Valeur Description
ultra-condensed Rend le texte si condensé si possible.
extra-condensed Rend le texte plus condensé mais pas si condensé si avec la valeur ultra-condesed.
condensed Rend le texte plus condensé mais pas si condensé si avec la valeur ultra-condesed.
semi-condensed Rend le texte plus condensé mais pas si condensé si avec la valeur extra-condesed.
normal Une fonte normale. C'est la valeur initiale de cette propriété.
semi-expanded Rend le texte plus étendu que le normal.
expanded Rend le texte plus étendu que semi-expanded.
extra-expanded Rend le texte plus étendu que expanded.
ultra-expanded La forme de texte la plus étendue.
initial Fait la propriété utiliser sa valeur initiale.
inherit Hérite la propriété de son élément parent.

Support de Navigateurs

chrome edge firefox safari opera
48.0+ 12.0+ 9.0+ 11.0+ 35.0+

Pratiquez vos connaissances

Qu'est-ce que la propriété 'font-stretch' en CSS?
Trouvez-vous cela utile?