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.
Der font-stretch-CSS-Descriptor ermöglicht es Autoren, ein normales, komprimiertes oder erweitertes Gesicht für die im @font-face-At-Regel angegebenen Schriften zu spezifizieren.
Für eine bestimmte Schriftfamilie können Autoren verschiedene Schriftarten herunterladen, die den unterschiedlichen Stilrichtungen derselben Schriftfamilie entsprechen, und dann den font-stretch-Descriptor verwenden, um die Streckung der Schriftart explizit festzulegen. Die Werte für den CSS-Descriptor sind dieselben wie für seine entsprechende 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 ein normales Schriftbild an.
semi-condensed,condensed,extra-condensed,ultra-condensed-
Gibt ein kondensierteres Schriftbild als normal an, wobei ultra-condensed das kompakteste ist.
semi-expanded,expanded,extra-expanded,ultra-expanded-
Gibt ein erweitertes Schriftbild als normal an, wobei ultra-expanded das am stärksten erweiterte ist.
<percentage>-
Ein
<percentage>-Wert zwischen 50% und 200% (einschließlich). Negative Werte sind für diese Eigenschaft nicht zulässig.
In früheren Versionen der font-stretch-Spezifikation akzeptierte die Eigenschaft nur die neun Schlüsselwortwerte. CSS Fonts Level 4 erweitert die Syntax, um auch einen <percentage>-Wert zu akzeptieren. Dies ermöglicht es variablen Schriften, eher ein Kontinuum von Zeichenbreiten anzubieten. Für TrueType- oder OpenType-Variable-Schriften wird die "wdth"-Variation verwendet, um unterschiedliche Breiten zu implementieren.
Wenn die Schriftart kein Gesicht bietet, das genau dem angegebenen Wert entspricht, werden Werte kleiner als 100% mit einem schmaleren Gesicht versehen und Werte größer als oder gleich 100% mit einem breiteren Gesicht.
Zuordnung von Schlüsselwörtern zu numerischen Werten
Die folgende Tabelle zeigt die Zuordnung zwischen 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% |
Variable Schriften
Die meisten Schriften haben eine bestimmte Breite, die einem der Schlüsselwortwerte entspricht. Einige Schriften, sogenannte variable Schriften, können jedoch einen Bereich von Streckungen mit mehr oder weniger feiner Granularität unterstützen, was dem Designer eine viel genauere Kontrolle über das ausgewählte Gewicht ermöglicht. Dafür sind Prozentsatzbereiche nützlich.
Für TrueType- oder OpenType-Variable-Schriften wird die "wdth"-Variation verwendet, um unterschiedliche Glyphenbreiten zu implementieren.
Zugänglichkeit
Menschen mit Legasthenie und anderen kognitiven Beeinträchtigungen kann es schwerfallen, Schriften zu lesen, die zu stark komprimiert sind, insbesondere wenn die Schrift ein niedriges Kontrastverhältnis aufweist.
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
Einstellen eines Prozentsatzbereichs für font-stretch
Das folgende Beispiel findet eine lokale Open Sans-Schrift oder importiert sie und ermöglicht die Verwendung der Schrift für normale, semi-komprimierte 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-prop-desc |
Browser-Kompatibilität
Loading…