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 in den Spezifikationen jetzt 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 CSS Eigenschaft wählt eine normale, komprimierte oder erweiterte Schriftart aus einer Schriftartfamilie 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: normal;
 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ü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 am komprimiertesten ist.
semi-expanded, expanded, extra-expanded, ultra-expanded: Gibt eine erweiterte Schriftart als normal an, wobei ultra-expanded am weitesten erweitert 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 Schlüsselwortwerten <font-stretch-css3> 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 Varianten, bei denen die Zeichen schmaler als die normale Variante (komprimierte Varianten) oder breiter als die normale Variante (erweiterte Varianten) sind.

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

Auswahl der Schriftart

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

Die folgende Tabelle zeigt die Wirkung der Angabe verschiedener Prozentwerte 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",
 sans-serif;
}
#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 unter und über diesem Bereich wählen die am besten 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	by computed value type

Formale Syntax

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

Beispiele

Einstellung der Schriftstauchungsprozentsätze

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 Schriftartgestaltung
CSS-Schriftarten Modul

Help improve MDN

Learn how to contribute Diese Seite wurde automatisch aus dem Englischen übersetzt.

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