font-stretch

Veraltet: Diese Funktion wird nicht mehr empfohlen. Obwohl einige Browser sie möglicherweise noch unterstützen, könnte sie bereits aus den relevanten Webstandards entfernt worden sein, in Kürze entfernt werden oder nur noch aus Kompatibilitätsgründen bestehen. Vermeiden Sie die Verwendung und aktualisieren Sie vorhandenen Code, falls möglich; siehe die Kompatibilitätstabelle am Ende dieser Seite, um Ihre Entscheidung zu unterstützen. Beachten Sie, dass diese Funktion jederzeit aufhören könnte zu funktionieren.

Hinweis: Die font-stretch-Eigenschaft 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 derzeit von keinen Browsern unterstützt.

Die font-stretch CSS Eigenschaft wählt ein normales, komprimiertes oder erweitertes Schriftbild aus einer Schriftart aus.

Probieren Sie es aus

font-stretch: condensed;

font-stretch: expanded;

font-stretch: ultra-expanded;

font-stretch: 50%;

font-stretch: 100%;

font-stretch: 150%;

<section class="default-example" id="default-example">
  <p class="transition-all" id="example-element">
    London. Michaelmas term lately over, and the Lord Chancellor sitting in
    Lincoln's Inn Hall. Implacable November weather. As much mud in the streets
    as if the waters had but newly retired from the face of the earth, and it
    would not be wonderful to meet a Megalosaurus, forty feet long or so,
    waddling like an elephantine lizard up Holborn Hill.
  </p>
</section>

@font-face {
  src: url("/shared-assets/fonts/LeagueMono-VF.ttf") format("truetype");
  font-family: League;
  font-style: normal;
  font-weight: 400;
  font-stretch: 50% 200%; /* Required by Chrome - allow 50% to 200% */
}

section {
  font-size: 1.2em;
  font-family: League, sans-serif;
}

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üsselwert oder als einzelner <percentage> Wert angegeben werden.

Werte

normal: Gibt ein normales Schriftbild an.
semi-condensed, condensed, extra-condensed, ultra-condensed: Gibt ein komprimierteres Schriftbild als normal an, wobei ultra-condensed das am meisten komprimierte ist.
semi-expanded, expanded, extra-expanded, ultra-expanded: Gibt ein erweitertes Schriftbild als normal an, wobei ultra-expanded das am meisten erweiterte 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üsselwerten 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 Schriftbilder, bei denen die Zeichen schmaler als das normale Schriftbild (komprimierte Schriftbilder) oder breiter als das normale Schriftbild (erweiterte Schriftbilder) sind.

Sie können font-stretch verwenden, um ein komprimiertes oder erweitertes Schriftbild aus solchen Schriften auszuwählen. Wenn die von Ihnen verwendete Schriftart keine komprimierten oder erweiterten Schriftbilder bietet, hat diese Eigenschaft keine Wirkung.

Auswahl des Schriftbilds

Das ausgewählte Schriftbild für einen gegebenen font-stretch-Wert hängt von den von der Schriftart unterstützten Schriftbildern ab. Wenn die Schriftart kein Schriftbild bereitstellt, das genau dem angegebenen Wert entspricht, werden Werte kleiner als 100% auf ein schmaleres Schriftbild abgebildet, und Werte größer oder gleich 100% auf ein breiteres Schriftbild.

Die folgende Tabelle demonstriert die Wirkung der Angabe verschiedener Prozentsätze von font-stretch auf zwei unterschiedliche 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-Schriftart, die Breiten von 75% bis 125% unterstützt. Werte unterhalb und oberhalb dieses Bereichs wählen die am nächsten passende Schriftart 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 für font-stretch 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

Siehe auch

font-style
font-weight
SVG font-stretch Attribut
Lernen: Grundlegende Text- und Schriftgestaltung
CSS Schriftarten Modul