CSS/Eigenschaften/font-stretch

Browserunterstützung
caniuse.com

Die Eigenschaft font-stretch bestimmt, die Laufweite in Bezug auf den horizontalen Platzverbrauch verschiedener Schnitte einer Familie. Alternativ können Sie mit letter-spacing global die Abstände für alle Zeichen modifizieren. Die CSS Fonts 4 Spezifikation strebt an, diese Eigenschaft in font-width umzubenennen, die Browser unterstützen das aber noch (April 2024) nicht.

Erlaubte Werte

Erlaubt sind dabei folgende Schlüsselwörter:

• absolute Angaben
  • ultra-condensed, sehr stark gestaucht
  • extra-condensed, stark gestaucht
  • condensed, gestaucht
  • semi-condensed, etwas gestaucht
  • normal, keine Veränderung der Laufweite, Voreinstellung
  • semi-expanded, etwas gestreckt
  • expanded, gestreckt
  • extra-expanded, stark gestreckt
  • ultra-expanded, sehr stark gestreckt

• relative Angaben
  • narrower, schmaler als im Elternelement
  • wider, breiter als im Elternelement

Vererbung steuernde Werte inherit, initial, unset und revert

Standardwert

normal

anwendbar auf

alle Elemente

Vererbung

ja

animierbar

ja, schrittweise

Beispiel

h2{ font-stretch: expanded; }

Legt für alle h2-Elemente gestreckte Zeichen fest

Beachten Sie: Die Unterschiede in der Laufweite werden nur dargestellt, wenn die Schriftfamilie entsprechende Schriftschnitte laden kann.
Eine für ein Element festgelegte Schriftlaufweite wird ohne Ihr Zutun an die Kindelemente vererbt. ( Siehe unteren Absatz: vererbte Werte)

Siehe auch

• Typografie/Variable Fonts
  • font-weight und font-stretch
• vergleiche auch letter-spacing

Weblinks

• Spezifikation (W3C): CSS Fonts Module Level 3
• Details: caniuse.com

Vererbte Werte

Für einen ererbten Wert von font-stretch gelten folgende Regeln:

ererbter Wert	gesetzter Wert
	narrower	wider
	Ergebnis
ultra-condensed	condensed	normal
extra-condensed
condensed
semi- condensed
normal		expanded
semi-expanded	normal
expanded
extra-expanded
ultra-expanded

Dies kann bedeuten, dass trotz der Angabe wider, die Schriftlaufweite schmaler wird, etwa wenn für das Elternelement font-stretch: extra-expanded; gilt. Ähnliches gilt auch für narrower.

Die Kindelemente ihrerseits vererben den errechneten Wert, nicht etwa narrower oder wider.