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 in font-width
umbenannt. Der Name font-stretch
wurde als Alias für die font-width
-Eigenschaft beibehalten.
Der neue Name font-width
wird noch von keinem Browser unterstützt.
Die font-stretch
CSS-Eigenschaft wählt ein normales, komprimiertes oder erweitertes Gesicht 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("/https/developer.mozilla.org/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
/* <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 ein normales Schriftbild an.
semi-condensed
,condensed
,extra-condensed
,ultra-condensed
-
Gibt ein stärker komprimiertes Schriftbild als normal an, wobei
ultra-condensed
das komprimierteste ist. semi-expanded
,expanded
,extra-expanded
,ultra-expanded
-
Gibt ein stärker erweitertes Schriftbild als normal an, wobei
ultra-expanded
das erweiterste ist. <percentage>
-
Ein
<percentage>
-Wert zwischen 50% und 200% (einschließlich). Negative Werte sind für diese Eigenschaft nicht erlaubt.
Zuordnung von Schlüsselwort zu numerischem Wert
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 Schriftbilder an, bei denen die Zeichen enger als das normale Bild (komprimierte Bilder) oder breiter als das normale Bild (erweiterte Bilder) sind.
Sie können font-stretch
verwenden, um aus solchen Schriften ein komprimiertes oder erweitertes Bild auszuwählen. Wenn die von Ihnen verwendete Schriftart keine komprimierten oder erweiterten Bilder anbietet, hat diese Eigenschaft keine Wirkung.
Auswahl des Schriftbildes
Das für einen gegebenen Wert von font-stretch
ausgewählte Bild hängt von den von der jeweiligen Schriftart unterstützten Schriftbildern ab. Wenn die Schriftart kein Bild bietet, das genau dem angegebenen Wert entspricht, werden Werte unter 100% einem engeren Bild zugeordnet, und Werte größer oder gleich 100% einem breiteren Bild.
Die folgende Tabelle zeigt die Wirkung verschiedener Prozentwerte von font-stretch
auf zwei unterschiedliche Schriftarten:
- Anek Malayalam ist eine variable Google-Schriftart, die Breiten von 75% bis 125% unterstützt. Werte darunter und darüber 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
Beispiele
Setzen von Schriftdehnungs-Prozenten
<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
Siehe auch
font-style
font-weight
- SVG
font-stretch
Attribut - Lernen: Grundlegende Text- und Schriftgestaltung
- CSS Fonts Modul