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>

Versuch es selber!

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.