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.

Hinweis: Die Eigenschaft font-stretch wurde nun in den Spezifikationen in font-width umbenannt. Der Name font-stretch wurde als Alias für die Eigenschaft font-width beibehalten. Der neue Name font-width wird von keinem Browser bisher unterstützt.

Die font-stretch CSS Eigenschaft wählt eine normale, komprimierte oder erweiterte Schriftart aus einer Schriftfamilie aus.

Probieren Sie es aus

Syntax

css
/* <font-stretch-css3> keyword values */
font-stretch: normal;
font-stretch: ultra-condensed;
font-stretch: extra-condensed;
font-stretch: condensed;
font-stretch: semi-condensed;
font-stretch: semi-expanded;
font-stretch: expanded;
font-stretch: extra-expanded;
font-stretch: ultra-expanded;

/* Percentage values */
font-stretch: 50%;
font-stretch: 100%;
font-stretch: 200%;

/* Global values */
font-stretch: inherit;
font-stretch: initial;
font-stretch: revert;
font-stretch: revert-layer;
font-stretch: unset;

Diese Eigenschaft kann als einzelner <font-stretch-css3> Schlüsselwortwert oder als einzelner <percentage> Wert angegeben werden.

Werte

normal

Gibt eine normale Schriftart an.

semi-condensed, condensed, extra-condensed, ultra-condensed

Gibt eine komprimiertere Schriftart als normal an, wobei ultra-condensed die kompakteste ist.

semi-expanded, expanded, extra-expanded, ultra-expanded

Gibt eine erweiterte Schriftart als normal an, wobei ultra-expanded die breiteste ist.

<percentage>

Ein <percentage> Wert zwischen 50% und 200% (einschließlich). Negative Werte sind für diese Eigenschaft nicht erlaubt.

Zuordnung von Schlüsselwörtern zu numerischen Werten

Die folgende Tabelle zeigt die Zuordnung zwischen den <font-stretch-css3> 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%

Beschreibung

Einige Schriftfamilien bieten zusätzliche Schriftvarianten, bei denen die Zeichen schmaler sind als die normale Variante (condensed Varianten) oder breiter als die normale Variante (expanded Varianten).

Sie können font-stretch verwenden, um eine komprimierte oder erweiterte Variante aus solchen Schriftarten auszuwählen. Wenn die verwendete Schriftart keine komprimierten oder erweiterten Varianten bietet, hat diese Eigenschaft keine Wirkung.

Auswahl des Schriftschnitts

Die für einen gegebenen Wert von font-stretch ausgewählte Variante hängt von den unterstützten Varianten der betreffenden Schriftart ab. Wenn die Schriftart keine Variante bietet, die genau dem angegebenen Wert entspricht, dann führen Werte unter 100% zu einer schmaleren Variante, und Werte größer oder gleich 100% zu einer breiteren Variante.

Die folgende Tabelle zeigt die Wirkung verschiedener prozentualer Werte von font-stretch auf zwei verschiedene Schriftarten:

  • Anek Malayalam ist eine variable Google-Schriftart, die Breiten von 75% bis 125% unterstützt. Werte unterhalb und oberhalb dieses Bereichs wählen die am besten passende Schriftart aus.
  • Inconsolata ist eine variable Schriftart, die einen kontinuierlichen Bereich von Breiten zwischen 50% und 200% bietet.

Formale Definition

Anfangswertnormal
Anwendbar aufall elements and text. Auch anwendbar auf ::first-letter und ::first-line.
VererbtJa
Berechneter Wertwie angegeben
AnimationstypSchriftbreite

Formale Syntax

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

Beispiele

Einstellen von Schriftdehnungsprozentsätzen

html
<p class="condensed">an elephantine lizard</p>
<p class="normal">an elephantine lizard</p>
<p class="expanded">an elephantine lizard</p>
css
@font-face {
  src: url("https://mdn.github.io/shared-assets/fonts/LeagueMono-VF.ttf");
  font-family: "LeagueMonoVariable";
  font-style: normal;
  font-stretch: 1% 500%; /* Required by Chrome */
}

p {
  font:
    1.5rem "LeagueMonoVariable",
    sans-serif;
}

.condensed {
  font-stretch: 50%;
}

.normal {
  font-stretch: 100%;
}

.expanded {
  font-stretch: 200%;
}

Spezifikationen

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

Browser-Kompatibilität

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
font-stretch
<percentage> syntax

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
See implementation notes.

Siehe auch