font-stretch

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2017.

Der CSS-Deskriptor font-stretch ermöglicht es Autoren, eine normale, kondensierte oder erweiterte Schriftart für die im @font-face-At-Regel angegebenen Schriftarten zu spezifizieren.

Für eine bestimmte Schriftfamilie können Autoren verschiedene Schriftstile herunterladen, die den unterschiedlichen Stilen derselben Schriftfamilie entsprechen, und dann den font-stretch-Deskriptor verwenden, um die Dehnung der Schriftart explizit festzulegen. Die Werte für den CSS-Deskriptor sind die gleichen wie die des entsprechenden Schriftarteigenschafts.

Syntax

css

/* Single values */
font-stretch: ultra-condensed;
font-stretch: extra-condensed;
font-stretch: condensed;
font-stretch: semi-condensed;
font-stretch: normal;
font-stretch: semi-expanded;
font-stretch: expanded;
font-stretch: extra-expanded;
font-stretch: ultra-expanded;
font-stretch: 50%;
font-stretch: 100%;
font-stretch: 200%;

/* multiple values */
font-stretch: 75% 125%;
font-stretch: condensed ultra-condensed;

Die font-stretch-Eigenschaft wird mit einem der unten aufgeführten Werte beschrieben.

Werte

normal: Gibt eine normale Schriftart an.
semi-condensed, condensed, extra-condensed, ultra-condensed: Gibt eine stärker kondensierte Schriftart als normal an, wobei ultra-condensed die kondensierteste ist.
semi-expanded, expanded, extra-expanded, ultra-expanded: Gibt eine stärker erweiterte Schriftart als normal an, wobei ultra-expanded die erweiterte ist.
<percentage>: Ein <percentage>-Wert zwischen 50% und 200% (einschließlich). Negative Werte sind für diese Eigenschaft nicht erlaubt.

In früheren Versionen der font-stretch-Spezifikation akzeptiert die Eigenschaft nur die neun Schlüsselwortwerte. CSS Fonts Level 4 erweitert die Syntax, um auch einen <percentage>-Wert zu akzeptieren. Dies ermöglicht es variablen Schriftarten, so etwas wie ein Kontinuum von Zeichenweiten anzubieten. Für TrueType- oder OpenType-Variable-Schriftarten wird die "wdth"-Variation verwendet, um unterschiedliche Breiten zu implementieren.

Wenn die Schriftart kein Gesicht bietet, das genau dem angegebenen Wert entspricht, werden Werte unter 100 % einem schmaleren Gesicht zugeordnet, und Werte größer oder gleich 100 % einem breiteren Gesicht.

Zuordnung von Schlüsselwort zu numerischem Wert

Die folgende Tabelle zeigt die Zuordnung zwischen Schlüsselwortwerten und numerischen Prozentsätzen:

Schlüsselwort	Prozentsatz
`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%

Variable Schriftarten

Die meisten Schriftarten haben eine bestimmte Breite, die einem der Schlüsselwortwerte entspricht. Einige Schriftarten, sogenannte variable Schriftarten, können jedoch einen Bereich von Streckungen mit mehr oder weniger feiner Granularität unterstützen, wodurch der Designer eine viel engere Kontrolle über das gewählte Gewicht erhält. Für diese sind Prozentsatzbereiche nützlich.

Für TrueType- oder OpenType-Variable-Schriftarten wird die "wdth"-Variation verwendet, um unterschiedliche Glyphenbreiten zu implementieren.

Barrierefreiheit

Menschen mit Dyslexie und anderen kognitiven Beeinträchtigungen können Schwierigkeiten beim Lesen von zu stark kondensierten Schriftarten haben, insbesondere wenn die Schrift eine geringe Kontrastfarbverhältnis aufweist.

Formale Definition

Zugehörige @-Regel	`@font-face`
Initialer Wert	`normal`
Berechneter Wert	wie angegeben

@font-face {
  font-family: "Open Sans";
  src:
    local("Open Sans") format("woff2"),
    url("/fonts/OpenSans-Regular-webfont.woff") format("woff");
  font-stretch: 87.5% 112.5%;
}

Spezifikationen

Specification
CSS Fonts Module Level 4 # font-prop-desc

Browser-Kompatibilität

BCD tables only load in the browser