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 Deskriptor ermöglicht es Autoren, ein normales, komprimiertes oder erweitertes Schriftbild für die im @font-face At-Regel spezifizierten Schriften festzulegen.
Für eine bestimmte Schriftfamilie können Autoren verschiedene Schriftarten herunterladen, die den unterschiedlichen Stilen derselben Schriftfamilie entsprechen, und dann den font-stretch Deskriptor verwenden, um die Dehnung des Schriftbildes explizit anzugeben. Die Werte für den CSS Deskriptor sind die gleichen wie die der entsprechenden Schrift-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 unter Verwendung eines der unten aufgeführten Werte beschrieben.
Werte
normal-
Gibt ein normales Schriftbild an.
semi-condensed,condensed,extra-condensed,ultra-condensed-
Gibt ein komprimierteres Schriftbild als normal an, wobei ultra-condensed die stärkste Komprimierung darstellt.
semi-expanded,expanded,extra-expanded,ultra-expanded-
Gibt ein erweitertes Schriftbild als normal an, wobei ultra-expanded die größte Erweiterung darstellt.
<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, etwas mehr wie ein Kontinuum von Zeichenbreiten anzubieten. Bei TrueType- oder OpenType-variablen Schriften wird die "wdth"-Variation verwendet, um unterschiedliche Breiten zu implementieren.
Wenn die Schriftart kein Schriftbild bietet, das genau dem angegebenen Wert entspricht, dann werden Werte kleiner als 100% mit einem schmaleren Schriftbild und Werte größer oder gleich 100% mit einem breiteren Schriftbild übersetzt.
Zuordnung von Schlüsselwörtern zu numerischen Werten
Die folgende Tabelle zeigt die Zuordnungen 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 ein Spektrum an Dehnungen mit mehr oder weniger feiner Granularität unterstützen, was dem Designer eine genauere Kontrolle über das gewählte Gewicht gibt. Dafür sind Prozentsatzbereiche nützlich.
Bei TrueType- oder OpenType-variablen Schriften wird die "wdth"-Variation verwendet, um unterschiedliche Glyphebreiten zu implementieren.
Barrierefreiheit
Menschen mit Legasthenie und anderen kognitiven Bedingungen können Schwierigkeiten haben, Schriften zu lesen, die zu stark komprimiert sind, insbesondere wenn die Schrift ein niedriges Kontrastverhältnis von Farben 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
Festlegen eines Prozentsatzbereichs für font-stretch
Das folgende Beispiel sucht eine lokale Open Sans Schriftart oder importiert sie und erlaubt die Verwendung der Schrift für normale, halbkomprimierte und halberweiterte 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…