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 2018.

Hinweis: Die font-stretch-Deskriptor wurde in der CSS Fonts-Spezifikation in font-width umbenannt. Um die Kompatibilität zu bewahren, behält die Spezifikation font-stretch als ein altes Alias für die font-width-Deskriptor bei.

Der font-stretch CSS Deskriptor erlaubt es Autoren, ein normales, komprimiertes oder erweitertes Schriftbild für die Schriften zu spezifizieren, die in der @font-face-Regel angegeben sind.

Für eine bestimmte Schriftfamilie können Autoren verschiedene Schriftschnitte herunterladen, die den unterschiedlichen Stilen derselben Schriftfamilie entsprechen, und dann den font-stretch-Deskriptor verwenden, um den Stretch des Schriftschnitts explizit anzugeben.

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;

Der font-stretch-Deskriptor kann einen einzelnen Wert aus der untenstehenden Liste annehmen.

Werte

normal: Gibt ein normal kondensiertes Schriftbild an.
semi-condensed, condensed, extra-condensed, ultra-condensed: Gibt ein stärker kondensiertes Schriftbild als normal an, wobei ultra-condensed am meisten kondensiert ist.
semi-expanded, expanded, extra-expanded, ultra-expanded: Gibt ein stärker erweitertes Schriftbild als normal an, wobei ultra-expanded am meisten erweitert ist.
<percentage>: Ein <percentage>-Wert zwischen 50% und 200% (einschließlich). Negative Werte sind für diesen Deskriptor nicht erlaubt.

In früheren Versionen der font-stretch-Spezifikation akzeptiert der Deskriptor nur die neun Schlüsselwortwerte. CSS Fonts Level 4 erweitert die Syntax, um auch einen <percentage>-Wert zu akzeptieren. Dies ermöglicht es variablen Schriften, eine kontinuierliche Variation der Zeichenbreiten zu bieten. Für TrueType- oder OpenType-Variableschriften wird die wdth-Variation verwendet, um sich verändernde Breiten zu implementieren.

Wenn die Schriftart kein Gesicht bereitstellt, das genau dem angegebenen Wert entspricht, dann werden Werte kleiner als 100% einem kondensierten Gesicht zugeordnet, und Werte größer oder gleich 100% einem erweiterten Gesicht.

Zuordnung von Schlüsselwort zu numerischen Werten

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 Schriften

Die meisten Schriften haben eine bestimmte Breite, die einem der Schlüsselwortwerte entspricht. Variable Schriften hingegen können einen Bereich von Breiten mit feiner Granularität unterstützen, was dem Designer eine größere Kontrolle über die gewählte Dicke gibt. Dafür sind Prozentsatzbereiche nützlich.

Für TrueType- oder OpenType-Variablen-Schriften wird die wdth-Variation verwendet, um verschiedene Glyphenbreiten zu implementieren.

Barrierefreiheit

Personen mit Dyslexie und anderen kognitiven Beeinträchtigungen können Schwierigkeiten haben, Schriftarten zu lesen, die zu stark kondensiert sind, insbesondere wenn die Schriftart ein geringes Farbkontrastverhältnis aufweist.

Formale Definition

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

Formale Syntax

font-width = 
  auto                 |
  <'font-width'>{1,2}  

<font-width> = 
  normal              |
  <percentage [0,∞]>  |
  ultra-condensed     |
  extra-condensed     |
  condensed           |
  semi-condensed      |
  semi-expanded       |
  expanded            |
  extra-expanded      |
  ultra-expanded

Beispiele

Festlegen eines Prozentsatzbereichs für font-stretch

Das folgende Beispiel verwendet die League Mono Schriftart. Es synthesiert verschiedene Schriftfamilien aus derselben Schriftdatei, indem es den font-stretch-Deskriptor mit verschiedenen Schlüsselwörtern und Prozentsätzen verwendet.

html

<p>League Mono</p>
<p>League Mono</p>
<p>League Mono</p>

css

@font-face {
  font-family: "League Mono Ultra Condensed";
  src: url("/shared-assets/fonts/LeagueMono-VF.ttf") format("truetype");
  font-stretch: ultra-condensed; /* same as 50% */
}

@font-face {
  font-family: "League Mono Normal";
  src: url("/shared-assets/fonts/LeagueMono-VF.ttf") format("truetype");
  font-stretch: 100%; /* same as normal */
}

@font-face {
  font-family: "League Mono Ultra Expanded";
  src: url("/shared-assets/fonts/LeagueMono-VF.ttf") format("truetype");
  font-stretch: ultra-expanded; /* same as 200% */
}

p:nth-child(1) {
  font-family: "League Mono Ultra Condensed", sans-serif;
}

p:nth-child(2) {
  font-family: "League Mono Normal", sans-serif;
}

p:nth-child(3) {
  font-family: "League Mono Ultra Expanded", sans-serif;
}

Spezifikationen

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

Browser-Kompatibilität

Siehe auch

Moderne font-width-Deskriptor, der font-stretch ersetzt
font-display-Deskriptor
font-family-Deskriptor
font-weight-Deskriptor
font-style-Deskriptor
font-feature-settings-Deskriptor
font-variation-settings-Deskriptor
src-Deskriptor
unicode-range-Deskriptor

Help improve MDN

Learn how to contribute Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden