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 font-stretch-Eigenschaft wurde in den Spezifikationen in font-width umbenannt. Der Name font-stretch wurde als Alias für die font-width-Eigenschaft beibehalten. Der neue Name font-width wird von keinem Browser unterstützt.

Die font-stretch-Eigenschaft von CSS wählt eine normale, schmalere oder weitere Schriftart aus einer Schriftartfamilie 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 entweder als einzelnes <font-stretch-css3> Schlüsselwort oder als einzelner <percentage> Wert angegeben werden.

Werte

normal: Spezifiziert eine normale Schriftart.
semi-condensed, condensed, extra-condensed, ultra-condensed: Spezifiziert eine schmalere Schriftart als normal, wobei ultra-condensed am schmalsten ist.
semi-expanded, expanded, extra-expanded, ultra-expanded: Spezifiziert eine weitere Schriftart als normal, wobei ultra-expanded am weitesten ist.
<percentage>: Ein <percentage> Wert zwischen 50% und 200% (einschließlich). Negative Werte sind für diese Eigenschaft nicht zulässig.

Zuordnung von Schlüsselwort zu numerischem Wert

Die folgende Tabelle zeigt die Zuordnung zwischen den <font-stretch-css3> Schlüsselwörtern und den 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 Schriftarten bieten zusätzliche Schnitte, bei denen die Zeichen schmaler als der normale Schnitt (schmale Schnitte) oder breiter als der normale Schnitt (weite Schnitte) sind.

Sie können font-stretch verwenden, um einen schmalen oder weiten Schnitt aus solchen Schriftarten auszuwählen. Wenn die verwendete Schriftart keine schmalen oder weiten Schnitte bietet, hat diese Eigenschaft keine Wirkung.

Auswahl der Schriftart

Der ausgewählte Schnitt für einen gegebenen Wert von font-stretch hängt von den von der betreffenden Schriftart unterstützten Schnitten ab. Wenn die Schriftart keinen Schnitt bietet, der genau dem angegebenen Wert entspricht, dann weisen Werte unter 100% auf einen schmaleren Schnitt hin, und Werte gleich oder über 100% auf einen weiteren Schnitt.

Die folgende Tabelle zeigt die Wirkung der Angabe verschiedener Prozentsatzwerte von font-stretch auf zwei verschiedene Schriftarten:

@font-face {
  font-family: "Inconsolata";
  src: url("https://fonts.gstatic.com/s/inconsolata/v31/QlddNThLqRwH-OJ1UHjlKENVzlm-WkL3GZQmAwPyya15.woff2")
    format("woff2");
  font-stretch: 50% 200%;
}

@font-face {
  font-family: "Anek Malayalam";
  src: url("https://fonts.gstatic.com/s/anekmalayalam/v4/6qLUKZActRTs_mZAJUZWWkhke0nYa-f6__Azq3-gP1W7db9_.woff2")
    format("woff2");
  font-stretch: 75% 125%;
}

td {
  border: solid;
  border-width: 1px;
}

#inconsolata td {
  font:
    90px Inconsolata,
    sans-serif;
}
#anek-malayalam td {
  font: 90px "Anek Malayalam";
}
#inconsolata td:nth-child(2),
#anek-malayalam td:nth-child(2) {
  font-stretch: 50%;
}
#inconsolata td:nth-child(3),
#anek-malayalam td:nth-child(3) {
  font-stretch: 62.5%;
}
#inconsolata td:nth-child(4),
#anek-malayalam td:nth-child(4) {
  font-stretch: 75%;
}
#inconsolata td:nth-child(5),
#anek-malayalam td:nth-child(5) {
  font-stretch: 87.5%;
}
#inconsolata td:nth-child(6),
#anek-malayalam td:nth-child(6) {
  font-stretch: 100%;
}
#inconsolata td:nth-child(7),
#anek-malayalam td:nth-child(7) {
  font-stretch: 112.5%;
}
#inconsolata td:nth-child(8),
#anek-malayalam td:nth-child(8) {
  font-stretch: 125%;
}
#inconsolata td:nth-child(9),
#anek-malayalam td:nth-child(9) {
  font-stretch: 150%;
}
#inconsolata td:nth-child(10),
#anek-malayalam td:nth-child(10) {
  font-stretch: 200%;
}

<table class="standard-table">
  <thead>
    <tr>
      <th scope="row"></th>
      <th scope="col">50%</th>
      <th scope="col">62.5%</th>
      <th scope="col">75%</th>
      <th scope="col">87.5%</th>
      <th scope="col">100%</th>
      <th scope="col">112.5%</th>
      <th scope="col">125%</th>
      <th scope="col">150%</th>
      <th scope="col">200%</th>
    </tr>
  </thead>
  <tbody>
    <tr id="inconsolata">
      <th scope="row">Inconsolata</th>
      <td>e</td>
      <td>e</td>
      <td>e</td>
      <td>e</td>
      <td>e</td>
      <td>e</td>
      <td>e</td>
      <td>e</td>
      <td>e</td>
    </tr>
    <tr id="anek-malayalam">
      <th scope="row">Anek Malayalam</th>
      <td>e</td>
      <td>e</td>
      <td>e</td>
      <td>e</td>
      <td>e</td>
      <td>e</td>
      <td>e</td>
      <td>e</td>
      <td>e</td>
    </tr>
  </tbody>
</table>

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

Formale Definition

Anfangswert	`normal`
Anwendbar auf	all elements and text. Auch anwendbar auf `::first-letter` und `::first-line`.
Vererbt	Ja
Berechneter Wert	wie angegeben
Animationstyp	Schriftbreite

Formale Syntax

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

Beispiele

Prozentsätze der Schriftstreckung festlegen

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

BCD tables only load in the browser