CSS-Eigenschaft font-stretch

Die CSS-Eigenschaft font-stretch macht den Text schmaler oder breiter.

Die Eigenschaft font-stretch funktioniert nicht mit jeder Schriftart! Es funktioniert nur, wenn die Schriftfamilie breitbandige Flächen hat. Die Eigenschaft font-stretch selbst dehnt eine Schrift nicht aus.

Die Eigenschaft hat folgende Werte:

  • font-stretch:
  • ultra-condensed
  • extra-condensed
  • condensed
  • semi-condensed
  • normal
  • semi-expanded
  • expanded
  • extra-expanded
  • ultra-expanded
Anfangswert normal
Gilt für Alle Elemente. Es gilt auch für ::first-letter und ::first-line.
Geerbt Ja
Animierbar Ja
Version CSS3
DOM Syntax object.style.fontStretch = "expanded";

Syntax

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

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</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>

Values

Value Description
ultra-condensed Macht den Text so schmal wie möglich.
extra-condensed Macht den Text schmaler, aber nicht so schmaler als der Wert ultra-condesed.
condensed Macht den Text schmaler, aber nicht so schmaler als der Wert ultra-condesed.
semi-condensed Macht den Text schmaler, aber nicht so schmaler als der Wert extra-condensed.
normal Es gibt keine Schriftverlängerung. Das ist der Standardwert dieser Eigenschaft.
semi-expanded Macht den Text breiter als normal.
expanded Macht den Text breiter als semi-expanded.
extra-expanded Macht den Text breiter als expanded.
ultra-expanded Macht den Text so breit wie möglich.
initial Der Wert stellt die Eigenschaft auf seinen Standardwert ein.
inherit Der Wert erbt die Eigenschaft von seinem übergeordneten Element.

Browser-Support

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

Übe dein Wissen

Was ist der Standardwert für die CSS-Eigenschaft 'font-stretch'?
Finden Sie das nützlich?