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:
Der font-stretch Deskriptor wurde im CSS Fonts Specification in font-width umbenannt. Um die Kompatibilität zu wahren, behält die Spezifikation font-stretch als Alias für den font-width Deskriptor bei.
Der font-stretch CSS Deskriptor ermöglicht es Autoren, eine normale, kondensierte oder erweiterte Schrift für die im @font-face At-Regel spezifizierten Schriften festzulegen.
Für eine bestimmte Schriftfamilie können Autoren verschiedene Schriftschnitte herunterladen, die den unterschiedlichen Stilen derselben Schriftfamilie entsprechen, und dann den font-stretch Deskriptor verwenden, um die Dehnung des Schriftschnitts explizit festzulegen. Die Werte für den CSS-Deskriptor entsprechen denen der zugehörigen Schriftart-Eigenschaft.
Syntax
/* Single values */
font-stretch: ultra-condensed;
font-stretch: extra-condensed;
font-stretch: condensed;
font-stretch: semi-condensed;
font-stretch: normal;
font-stretch: semi-expanded;
font-stretch: expanded;
font-stretch: extra-expanded;
font-stretch: ultra-expanded;
font-stretch: 50%;
font-stretch: 100%;
font-stretch: 200%;
/* multiple values */
font-stretch: 75% 125%;
font-stretch: condensed ultra-condensed;
Die font-stretch Eigenschaft wird mit einem der unten aufgeführten Werte beschrieben.
Werte
normal-
Gibt einen normalen Schriftschnitt an.
semi-condensed,condensed,extra-condensed,ultra-condensed-
Gibt einen schmaleren Schriftschnitt als normal an, wobei ultra-condensed der am meisten komprimierte ist.
semi-expanded,expanded,extra-expanded,ultra-expanded-
Gibt einen breiteren Schriftschnitt als normal an, wobei ultra-expanded der am meisten erweiterte ist.
<percentage>-
Ein
<percentage>Wert zwischen 50% und 200% (einschließlich). Negative Werte sind für diese Eigenschaft nicht erlaubt.
In früheren Versionen der font-stretch Spezifikation akzeptiert die Eigenschaft nur die neun Schlüsselwortwerte. CSS Fonts Level 4 erweitert die Syntax, um auch einen <percentage> Wert zu akzeptieren. Dies ermöglicht variablen Schriftarten, etwas mehr wie ein Kontinuum von Schriftbreiten anzubieten. Für TrueType- oder OpenType-Varianten-Schriftarten wird die "wdth"-Variation verwendet, um variierende Breiten zu implementieren.
Wenn die Schriftart kein Schriftschnitt bereitstellt, der exakt dem angegebenen Wert entspricht, dann werden Werte kleiner als 100% auf einen schmaleren Schriftschnitt abgebildet, und Werte größer oder gleich 100% auf einen breiteren Schriftschnitt.
Zuordnung von Schlüsselwörtern zu numerischen Werten
Die folgende Tabelle zeigt die Zuordnung zwischen den Schlüsselwortwerten und den prozentualen Zahlenwerten:
| 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% |
Variable Schriftarten
Die meisten Schriftarten haben eine bestimmte Breite, die einem der Schlüsselwortwerte entspricht. Einige Schriftarten, sogenannte variable Schriftarten, können jedoch einen Bereich an Dehnungen mit mehr oder weniger feiner Granularität unterstützen, was dem Designer eine wesentlich größere Kontrolle über das gewählte Gewicht gibt. Dafür sind Prozentbereiche nützlich.
Für TrueType- oder OpenType-Variable-Schrifttypen wird die "wdth"-Variation verwendet, um variierende Glyphebreiten zu implementieren.
Barrierefreiheit
Personen mit Legasthenie und anderen kognitiven Beeinträchtigungen können Schwierigkeiten beim Lesen von Schriftarten haben, die zu kondensiert sind, insbesondere wenn die Schrift eine geringe Kontrastfarbe hat.
Formale Definition
| Zugehörige @-Regel | @font-face |
|---|---|
| Anfangswert | normal |
| Berechneter Wert | wie angegeben |
Formale Syntax
font-width =
auto |
<'font-width'>{1,2}
<font-width> =
normal |
<percentage [0,∞]> |
ultra-condensed |
extra-condensed |
condensed |
semi-condensed |
semi-expanded |
expanded |
extra-expanded |
ultra-expanded
Beispiele
Festlegung eines Prozentbereichs für font-stretch
Das folgende Beispiel findet eine lokale Open Sans Schriftart oder importiert sie und erlaubt die Verwendung der Schriftart für normale, semi-kondensierte und semi-erweiterte Zustände.
@font-face {
font-family: "Open Sans";
src:
local("Open Sans") format("woff2"),
url("/fonts/OpenSans-Regular-webfont.woff") format("woff");
font-stretch: 87.5% 112.5%;
}
Spezifikationen
| Specification |
|---|
| CSS Fonts Module Level 4 # font-stretch-desc |