CSS font-stretch-Eigenschaft

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

Diese Eigenschaft ist eine der CSS3-Eigenschaften.

Die font-stretch-Eigenschaft funktioniert nicht mit jeder Schriftart! Sie funktioniert nur, wenn die font-family Breitenvarianten unterstützt. Die font-stretch-Eigenschaft allein streckt eine Schriftart nicht.

Diese Eigenschaft hat folgende Werte:

ultra-condensed
extra-condensed
condensed
semi-condensed
normal
semi-expanded
expanded
extra-expanded
ultra-expanded
50% to 200%

Anfangswert	normal
Anwendbar auf	Alle Elemente. Gilt auch für ::first-letter und ::first-line.
Vererbbar	Nein
Animierbar	Ja.
Version	CSS3
DOM-Syntax	object.style.fontStretch = "expanded";

Syntax

Syntax der CSS font-stretch-Eigenschaft

css

font-stretch: ultra-condensed | extra-condensed | condensed | semi-condensed | normal | semi-expanded | expanded | extra-expanded | ultra-expanded | 50% | 100% | 200% | initial | inherit;

Beispiel für die font-stretch-Eigenschaft:

Beispiel der CSS font-stretch-Eigenschaft mit den Werten ultra-condensed, extra-condensed, condensed, semi-condensed, normal, semi-expanded, expanded, extra-expanded, ultra-expanded, initial und inherit

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the 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>

Try it Yourself »

Auswahl des Schriftschnitts

Die Auswahl des Schnitts für den Wert der font-stretch-Eigenschaft hängt davon ab, welche Schnittvarianten die jeweilige Schriftart unterstützt. Falls die Schriftart keinen Schnitt für den angegebenen Wert bereitstellt, werden Werte unter 100 % auf einen schmaleren Schnitt und Werte von 100 % oder höher auf einen breiteren Schnitt abgebildet.

Werte

Wert	Beschreibung
ultra-condensed	Schrumpft den Text auf das Maximum.
extra-condensed	Schrumpft den Text deutlich, jedoch weniger als `ultra-condensed`.
condensed	Schrumpft den Text moderat, jedoch weniger als `extra-condensed`.
semi-condensed	Schrumpft den Text leicht, jedoch weniger als `condensed`.
normal	Keine Streckung wird angewendet. Dies ist der Standardwert.
semi-expanded	Dehnt den Text leicht breiter als `normal`.
expanded	Dehnt den Text moderat breiter als `semi-expanded`.
extra-expanded	Dehnt den Text deutlich breiter als `expanded`.
ultra-expanded	Dehnt den Text auf das Maximum.
50% to 200%	Numerische Werte, die den Streckungsfaktor darstellen.
initial	Setzt die Eigenschaft auf ihren Standardwert zurück.
inherit	Erbt die Eigenschaft vom Elternelement.

Praxis

Was macht die CSS-Eigenschaft 'font-stretch'?

Sie ermöglicht es, das Seitenverhältnis von Schriftarten zu ändern, ohne deren Höhe zu verändern.Sie ändert die Farbe der Schrift.Sie ändert die Höhe der Schrift.Sie ermöglicht es, die Breite von Schriftarten zu ändern.

CSS font-stretch-Eigenschaft ​

Syntax ​

Beispiel für die font-stretch-Eigenschaft: ​

Auswahl des Schriftschnitts ​