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

48.0+ 12.0+ 9.0+ 11.0+ 35.0+


Trouvez-vous cela utile?

Articles Associées