CSS-At-Rule-Deskriptor `font-stretch`

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.

Vollständige Kompatibilität anzeigen
Mehr erfahren

Hinweis: Der Deskriptor font-stretch wurde in der CSS-Fonts-Spezifikation in font-width umbenannt. Um die Kompatibilität zu erhalten, bleibt font-stretch in der Spezifikation als veralteter Alias für den Deskriptor font-width erhalten.

Mit dem font-stretch-Deskriptor von CSS können Sie für die in der @font-face-At-Rule angegebenen Schriftarten einen Schriftstil mit normaler, schmalerer oder breiterer Zeichenbreite festlegen.

Für eine bestimmte Schriftfamilie können Sie verschiedene Schriftstile herunterladen, die den unterschiedlichen Varianten derselben Schriftfamilie entsprechen, und dann mit dem Deskriptor font-stretch die Zeichenbreite des jeweiligen Schriftstils ausdrücklich festlegen.

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 Deskriptor font-stretch kann einen einzelnen Wert aus der folgenden Liste annehmen.

Werte

normal: Gibt einen Schriftstil mit normaler Zeichenbreite an.
semi-condensed, condensed, extra-condensed, ultra-condensed: Gibt einen Schriftstil mit schmaleren Zeichen als normal an, wobei ultra-condensed die schmalsten Zeichen bezeichnet.
semi-expanded, expanded, extra-expanded, ultra-expanded: Gibt einen Schriftstil mit breiteren Zeichen als normal an, wobei ultra-expanded die breitesten Zeichen bezeichnet.
<percentage>: Ein <percentage>-Wert zwischen 50 % und 200 % (einschließlich). Negative Werte sind für diesen Deskriptor nicht zulässig.

In früheren Versionen der font-stretch-Spezifikation akzeptierte der Deskriptor nur die neun Schlüsselwortwerte. CSS Fonts Level 4 erweitert die Syntax, sodass auch ein <percentage>-Wert zulässig ist. Dadurch können variable Schriftarten eine stufenlose Variation der Zeichenbreiten anbieten. Bei variablen TrueType- oder OpenType-Schriftarten wird die Variation wdth verwendet, um unterschiedliche Breiten umzusetzen.

Wenn die Schriftart keinen Schriftstil bereitstellt, der genau dem angegebenen Wert entspricht, werden Werte unter 100% einem schmaleren Schriftstil und Werte ab 100% einem breiteren Schriftstil zugeordnet.

Zuordnung von Schlüsselwörtern zu Zahlenwerten

Die folgende Tabelle zeigt die Zuordnung zwischen Schlüsselwortwerten und Prozentwerten:

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%

Variable Schriftarten

Die meisten Schriftarten haben eine bestimmte Breite, die einem der Schlüsselwortwerte entspricht. Variable Schriftarten können dagegen einen Bereich von Breiten mit feiner Abstufung unterstützen. Dadurch haben Gestaltende mehr Kontrolle über die gewählte Breite. Hierfür sind Prozentbereiche nützlich.

Bei variablen TrueType- oder OpenType-Schriftarten wird die Variation wdth verwendet, um unterschiedliche Glyphenbreiten umzusetzen.

Barrierefreiheit

Menschen mit Legasthenie und anderen kognitiven Beeinträchtigungen können Schwierigkeiten haben, Schriftarten mit zu schmalen Zeichen zu lesen, insbesondere wenn die Schrift einen geringen Farbkontrast 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

Einen Prozentbereich für font-stretch festlegen

Im folgenden Beispiel wird die Schriftart League Mono verwendet. Mithilfe des Deskriptors font-stretch werden aus derselben Schriftdatei verschiedene Schriftfamilien mit unterschiedlichen Schlüsselwörtern und Prozentwerten erzeugt.

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

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

Browser-Kompatibilität

Siehe auch

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

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

CSS-At-Rule-Deskriptor font-stretch

Help improve MDN

CSS-At-Rule-Deskriptor `font-stretch`