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
/* <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
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
Beispiele
Einstellen von Schriftdehnungsprozentsätzen
<p class="condensed">an elephantine lizard</p>
<p class="normal">an elephantine lizard</p>
<p class="expanded">an elephantine lizard</p>
@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 GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
font-stretch | ||||||||||||
<percentage> syntax |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
- See implementation notes.