`font-stretch` CSS-Satzbeschreibungsmerkmal

Baseline Weitgehend verfügbar

Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit September 2018 browserübergreifend verfügbar.

Hinweis: Das font-stretch Deskriptormerkmal wurde in der CSS Fonts Spezifikation in font-width umbenannt. Um die Kompatibilität zu erhalten, bleibt die Spezifikation font-stretch als ein veraltetes Alias für das font-width Deskriptormerkmal erhalten.

Das font-stretch CSS Deskriptormerkmal ermöglicht es Autoren, ein normales, komprimiertes oder erweitertes Schriftbild für die Schriften anzugeben, die in der @font-face Regel spezifiziert sind.

Für eine bestimmte Schriftfamilie können Autoren verschiedene Schriftstile herunterladen, die den verschiedenen Stilen der gleichen Schriftfamilie entsprechen, und dann das font-stretch Deskriptormerkmal verwenden, um die Dehnung des Schriftbildes 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;

Das font-stretch Deskriptormerkmal kann einen einzelnen Wert aus der untenstehenden Liste annehmen.

Werte

normal: Gibt ein normalerweise komprimiertes Schriftbild an.
semi-condensed, condensed, extra-condensed, ultra-condensed: Gibt ein komprimierteres Schriftbild als normal an, wobei ultra-komprimiert das am meisten komprimierte ist.
semi-expanded, expanded, extra-expanded, ultra-expanded: Gibt ein erweitertes Schriftbild als normal an, wobei ultra-erweitert das am meisten erweiterte ist.
<percentage>: Ein <percentage> Wert zwischen 50% und 200% (einschließlich). Negative Werte sind für dieses Deskriptormerkmal nicht zulässig.

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

Wenn die Schriftart kein Schriftbild bietet, das genau den angegebenen Wert entspricht, dann entsprechen Werte unter 100% einem komprimierten Schriftbild, und Werte größer oder gleich 100% einem erweiterten Schriftbild.

Zuordnung von Schlüsselwörtern 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 können jedoch ein Spektrum an Breiten mit feiner Granularität unterstützen, was dem Designer ein größeres Maß an Kontrolle über die gewählte Gewichtsverteilung bietet. Für diesen Zweck sind Prozentsatzbereiche nützlich.

Für TrueType- oder OpenType-Variable-Schriften wird die wdth Variation verwendet, um unterschiedliche Glifbreiten zu implementieren.

Barrierefreiheit

Menschen mit Legasthenie und anderen kognitiven Beeinträchtigungen können Schwierigkeiten haben, Schriften zu lesen, die zu stark komprimiert 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

Einstellen eines Prozentsatzbereichs für `font-stretch`

Das folgende Beispiel verwendet die League Mono Schriftart. Es synthetisiert verschiedene Schriftfamilien aus demselben Schriftdatei unter Verwendung des font-stretch Deskriptormerkmals mit unterschiedlichen Schlüsselwörtern und Prozentsätzen.

html

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

css

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

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

@font-face {
  font-family: "League Mono Ultra Expanded";
  src: url("/https/developer.mozilla.org/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

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

Browser-Kompatibilität

Siehe auch

Moderner 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

Erfahren Sie, wie Sie beitragen können Diese Seite wurde automatisch aus dem Englischen übersetzt.

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

font-stretch CSS-Satzbeschreibungsmerkmal

Help improve MDN

`font-stretch` CSS-Satzbeschreibungsmerkmal