CSS font-stretch Eigenschaft

Die CSS-Eigenschaft font-stretch wählt eine schmalere oder breitere Variante der aktuellen Schriftart und ermöglicht es, den Text zu kondensieren oder zu erweitern, ohne die font-size oder das font-weight zu ändern. Sie gehört zu den CSS3-Eigenschaften.

Das Wichtigste dabei ist: font-stretch dehnt Glyphen nicht wie eine Transformation. Es wählt lediglich eine alternative Breitenvariante aus, die die Schriftart bereits mitliefert. Hat die font-family keine Breitenvarianten, hat die Eigenschaft keinen sichtbaren Effekt – der Text bleibt in seiner normalen Breite. Deshalb sehen Sie ein Ergebnis nur bei Schriftarten, die kondensierte/erweiterte Varianten enthalten (zum Beispiel Myriad Pro, Roboto Condensed oder eine variable Schriftart mit einer wdth-Achse).

Wann sollte man es verwenden?

Greifen Sie auf font-stretch zurück, wenn:

Sie eine Schriftfamilie verwenden, die mehrere Breitenvarianten bereitstellt, und der Browser die richtige auswählen soll (anstatt jede Variante unter einem separaten font-family-Namen zu importieren).
Sie mit einer variablen Schriftart arbeiten, die eine Breitenachse (wdth) exponiiert – Prozentwerte werden direkt auf diese Achse übertragen.

Bei Alltagstext, bei dem die Schriftart nur eine einzige Breite hat, bewirkt font-stretch nichts. Verlassen Sie sich daher nicht darauf, um Text in eine Box einzupassen.

Hinweis: In der neuesten CSS-Fonts-Spezifikation wurde font-stretch in font-width umbenannt. Browser akzeptieren font-stretch weiterhin als Alias, daher bleibt der Eigenschaftsname in diesem Kapitel überall gültig.

Werte

font-stretch akzeptiert entweder ein Schlüsselwort oder einen Prozentwert. Jedes Schlüsselwort hat einen entsprechenden Prozentwert:

Schlüsselwort	Prozentwert
ultra-condensed	50%
extra-condensed	62.5%
condensed	75%
semi-condensed	87.5%
normal	100%
semi-expanded	112.5%
expanded	125%
extra-expanded	150%
ultra-expanded	200%

Prozentwerte bieten eine feinere Kontrolle: Jeder Wert von 50% bis 200% ist erlaubt, und bei einer variablen Schriftart können Zwischenwerte wie 90% oder 133% verwendet werden. Werte unter 100% sind schmaler als normal; Werte über 100% sind breiter.

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

Syntax

Syntax der CSS font-stretch-Eigenschaft

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

Beispiel der font-stretch-Eigenschaft

Das folgende Beispiel wendet jedes Schlüsselwort auf denselben Buchstaben an. Denken Sie daran, dass Sie einen Unterschied nur sehen, wenn die gerenderte Schriftart (Myriad Pro hier, mit einem System-Fallback) tatsächlich diese Breitenvarianten bereitstellt.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p {
        font-size: 4em;
        font-family: 'Myriad Pro', sans-serif;
      }
    </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>

Probier es selbst »

Prozentwert mit einer variablen Schriftart verwenden

Bei einer variablen Schriftart mit einer Breitenachse können Sie jeden Wert im Bereich 50%–200% anfordern, einschließlich Zwischenbreiten:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p {
        font-family: 'Roboto Flex', sans-serif;
        font-size: 2em;
      }
      .narrow { font-stretch: 75%; }
      .normal { font-stretch: 100%; }
      .wide   { font-stretch: 150%; }
    </style>
  </head>
  <body>
    <p class="narrow">Condensed text (75%)</p>
    <p class="normal">Normal text (100%)</p>
    <p class="wide">Expanded text (150%)</p>
  </body>
</html>

Wie die Variante ausgewählt wird

Die Variante, die für einen bestimmten font-stretch-Wert gewählt wird, hängt von den Breitenvarianten ab, die die Schriftart tatsächlich mitliefert. Wenn keine Variante genau dem angeforderten Wert entspricht, greift der Browser auf die nächstgelegene zurück: Werte unter 100% werden der nächstgelegenen schmaleren Variante zugeordnet, Werte ab 100% der nächstgelegenen breiteren Variante.

Wertbeschreibungen

Wert	Beschreibung
ultra-condensed	Verengt den Text auf das Maximum (50%).
extra-condensed	Verengt den Text erheblich, aber nicht so stark wie `ultra-condensed` (62,5%).
condensed	Verengt den Text mäßig, aber nicht so stark wie `extra-condensed` (75%).
semi-condensed	Verengt den Text leicht, aber nicht so stark wie `condensed` (87,5%).
normal	Es wird keine alternative Variante ausgewählt. Dies ist der Standardwert (100%).
semi-expanded	Erweitert den Text etwas breiter als `normal` (112,5%).
expanded	Erweitert den Text mäßig breiter als `semi-expanded` (125%).
extra-expanded	Erweitert den Text erheblich breiter als `expanded` (150%).
ultra-expanded	Erweitert den Text auf das Maximum (200%).
50% bis 200%	Ein Prozentwert, der den Streckungsfaktor darstellt; unter 100% ist schmaler, darüber breiter.
initial	Setzt die Eigenschaft auf ihren Standardwert.
inherit	Erbt die Eigenschaft vom übergeordneten Element.

Übung

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

Sie ermöglicht die Änderung des Seitenverhältnisses von Schriften, ohne deren Höhe zu verändern.Sie ändert die Farbe der Schrift.Sie ändert die Höhe der Schrift.Sie ermöglicht die Änderung der Breite von Schriften.