Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten.Erfahre mehr über dieses Experiment.
font-stretch
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2018.
Hinweis:Derfont-stretch Deskriptor wurde in derCSS Fonts Spezifikation infont-width umbenannt. Um die Kompatibilität zu bewahren, bleibtfont-stretch als Alias für denfont-width Deskriptor in der Spezifikation erhalten.
Derfont-stretchCSS 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 denfont-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;Diefont-stretch Eigenschaft wird mit einem der unten aufgeführten Werte beschrieben.
Werte
normalGibt ein normales Schriftbild an.
semi-condensed,condensed,extra-condensed,ultra-condensedGibt ein komprimierteres Schriftbild als normal an, wobei ultra-condensed das am stärksten komprimierte ist.
semi-expanded,expanded,extra-expanded,ultra-expandedGibt 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 derfont-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 eineniedrige 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ürfont-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 |