font-stretch
Hinweis:
Der font-stretch Deskriptor wurde in der CSS Fonts Spezifikation in font-width umbenannt. Um die Kompatibilität zu bewahren, bleibt font-stretch als Alias für den font-width Deskriptor in der Spezifikation erhalten.
Der font-stretch CSS Deskriptor ermöglicht es Autoren, für die in der @font-face at-Regel angegebenen Schriftarten ein normales, komprimiertes oder erweitertes Schriftbild festzulegen.
Für eine bestimmte Schriftfamilie können Autoren verschiedene Schriftbilder herunterladen, die den verschiedenen Stilen derselben Schriftfamilie entsprechen, und dann den font-stretch Deskriptor verwenden, um explizit die Dehnung des Schriftbildes anzugeben. Die Werte für den CSS-Deskriptor sind die gleichen wie für die 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 komprimierteres Schriftbild als normal an, wobei ultra-condensed das am stärksten komprimierte 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 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 es variablen Schriftarten, etwas Ähnliches wie ein Kontinuum von Zeichenbreiten anzubieten. Für TrueType- oder OpenType-Variable-Schriften wird die "wdth"-Variation verwendet, um unterschiedliche Breiten umzusetzen.
Wenn die Schriftart kein Schriftbild bereitstellt, das genau dem angegebenen Wert entspricht, dann werden Werte unter 100% auf ein engeres Schriftbild abgebildet, und Werte größer oder gleich 100% auf ein breiteres Schriftbild.
Zuordnung von Schlüsselworten 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 Schriftarten haben eine bestimmte Breite, die einem der Schlüsselbegriffe entspricht. Einige Schriftarten, sogenannte variable Schriften, können jedoch eine Reihe von Dehnungen mit mehr oder weniger feiner Granularität unterstützen, was dem Designer erlaubt, ein viel genaueres Maß an Kontrolle über die gewählte Gewichtung zu haben. Dafür sind Prozentsätze nützlich.
Für TrueType- oder OpenType-Variable-Schriften wird die "wdth"-Variation zur Umsetzung unterschiedlicher Glyphenbreiten verwendet.
Barrierefreiheit
Menschen mit Legasthenie und anderen kognitiven Beeinträchtigungen können Schwierigkeiten beim Lesen von zu stark komprimierten Schriften haben, insbesondere wenn die Schrift eine niedrige Kontrastverhältnis der Farben 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
Festlegung eines Prozentsatzbereichs für font-stretch
Das folgende Beispiel sucht eine lokale Open Sans-Schriftart oder importiert sie und erlaubt die Verwendung der Schriftart 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-stretch-desc |