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-Regelsatz angegebenen Schriften festzulegen.
Für eine bestimmte Schriftfamilie können Autoren verschiedene Schriftbilder herunterladen, die den unterschiedlichen Stilvarianten 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 für die entsprechende 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 mit einem der unten aufgeführten Werte beschrieben.
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 am stärksten komprimierte ist.
semi-expanded,expanded,extra-expanded,ultra-expanded-
Gibt ein stärker 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 erlaubt.
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 variablen Schriften, ein Kontinuum von Zeichenbreiten anzubieten. Für TrueType- oder OpenType-Variable Fonts wird die "wdth"-Variation verwendet, um unterschiedliche Breiten umzusetzen.
Wenn die Schriftart kein Gesicht bietet, das genau dem angegebenen Wert entspricht, dann werden Werte unter 100 % mit einem schmaleren Gesicht verknüpft und Werte größer oder gleich 100 % mit einem breiteren Gesicht verknüpft.
Zuordnung von Schlüsselwörtern zu numerischen Werten
Die folgende Tabelle zeigt die Zuordnung zwischen Schlüsselwortwerten und numerischen Prozentwerten:
| 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 Fonts
Die meisten Schriften haben eine bestimmte Breite, die einem der Schlüsselwortwerte entspricht. Einige Schriften, sogenannte variable Schriften, können jedoch einen Bereich von Dehnungen mit mehr oder weniger feiner Granularität unterstützen, und das kann dem Designer eine viel genauere Kontrolle über die gewählte Gewichtung geben. Für diese sind Prozentbereiche nützlich.
Für TrueType- oder OpenType-Variable Fonts wird die "wdth"-Variation verwendet, um unterschiedliche Glyphenbreiten umzusetzen.
Barrierefreiheit
Personen mit Dyslexie und anderen kognitiven Beeinträchtigungen können Schwierigkeiten beim Lesen von Schriften haben, 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
Beispiele
Festlegung eines Prozentsatzbereichs für font-stretch
Das folgende Beispiel findet eine lokale Open Sans-Schriftart oder importiert sie und erlaubt die Verwendung der Schrift in normalen, halb komprimierten und halb erweiterten Zuständen.
@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 |