font-width
Hinweis:
Der font-width Deskriptor ist der moderne Ersatz für den font-stretch Deskriptor, welcher ein veralteter Alias ist. Während font-width der bevorzugte Name der Spezifikation ist, hat font-stretch derzeit eine breitere Browser-Unterstützung. Überprüfen Sie das Fallback-Beispiel und die Browser-Kompatibilität Tabelle für Details.
Der font-width CSS Deskriptor erlaubt es Autoren, ein normales, komprimiertes oder erweitertes Schriftbild für die im @font-face Regelwerk angegebenen Schriftarten zu definieren.
Für eine bestimmte Schriftfamilie können Autoren verschiedene Schriftbilder herunterladen, die den unterschiedlichen Stilen derselben Schriftfamilie entsprechen, und dann den font-width Deskriptor verwenden, um die Breite des Schriftbildes explizit anzugeben. Die verfügbaren Werte des font-width Deskriptors sind dieselben wie die der entsprechenden font-width Eigenschaft.
Syntax
/* Single values */
font-width: ultra-condensed;
font-width: extra-condensed;
font-width: condensed;
font-width: semi-condensed;
font-width: normal;
font-width: semi-expanded;
font-width: expanded;
font-width: extra-expanded;
font-width: ultra-expanded;
font-width: 50%;
font-width: 100%;
font-width: 200%;
/* Multiple values */
font-width: 75% 125%;
font-width: condensed ultra-condensed;
Der font-width Deskriptor kann einen einzelnen Wert aus der folgenden Liste annehmen.
Werte
normal-
Spezifiziert ein normalerweise komprimiertes Schriftbild.
semi-condensed,condensed,extra-condensed,ultra-condensed-
Spezifiziert ein stärker komprimiertes Schriftbild als normal, wobei ultra-condensed am stärksten komprimiert ist.
semi-expanded,expanded,extra-expanded,ultra-expanded-
Spezifiziert ein stärker erweitertes Schriftbild als normal, wobei ultra-expanded am meisten erweitert ist.
<percentage>-
Ein
<percentage>Wert zwischen 50% und 200% (einschließlich). Negative Werte sind für diesen Deskriptor nicht erlaubt.
In früheren Versionen der font-width Spezifikation akzeptierte der Deskriptor nur die neun Schlüsselwortwerte. CSS Fonts Level 4 erweitert die Syntax, um auch einen <percentage> Wert zu akzeptieren. Dies ermöglicht variablen Schriften eine kontinuierliche Variation der Zeichenbreiten anzubieten. Für TrueType oder OpenType variiert die wdth Variation zur Umsetzung variierender Breiten.
Wenn die Schriftart kein Schriftbild bietet, das genau zum angegebenen Wert passt, werden Werte kleiner als 100% auf ein komprimiertes Schriftbild abgebildet, und Werte größer oder gleich 100% auf ein erweitertes Schriftbild.
Zuordnung von Schlüsselwörtern zu numerischen Werten
Die folgende Tabelle zeigt die Zuordnung von Schlüsselwortwerten zu numerischen Prozentwerten:
| Schlüsselwort | Prozent |
|---|---|
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. Allerdings können variable Schriften einen Bereich von Breiten mit feiner Granulierung unterstützen, was dem Designer eine größere Kontrolle über das gewählte Gewicht ermöglicht. Dafür sind Prozentbereiche nützlich.
Für TrueType oder OpenType variable Schriften wird die 'wdth' Variation verwendet, um variierende Glyphen-Breiten umzusetzen.
Barrierefreiheit
Menschen mit Legasthenie und anderen kognitiven Einschränkungen können Schwierigkeiten haben, Schriftarten zu lesen, die zu stark komprimiert sind, insbesondere wenn die Schrift einen niedrigen Farbkontrast aufweist.
Formale Definition
Wert in der Datenbank nicht gefunden!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 Prozentbereichs für font-width
Das folgende Beispiel verwendet die League Mono Schriftart. Es synthetisiert unterschiedliche Schriftfamilien aus derselben Schriftdatenquelle unter Verwendung des font-width Deskriptors mit verschiedenen Schlüsselwörtern und Prozentsätzen.
<p>League Mono</p>
<p>League Mono</p>
<p>League Mono</p>
@font-face {
font-family: "League Mono Ultra Condensed";
src: url("/shared-assets/fonts/LeagueMono-VF.ttf") format("truetype");
font-width: ultra-condensed; /* same as 50% */
}
@font-face {
font-family: "League Mono Normal";
src: url("/shared-assets/fonts/LeagueMono-VF.ttf") format("truetype");
font-width: 100%; /* same as normal */
}
@font-face {
font-family: "League Mono Ultra Expanded";
src: url("/shared-assets/fonts/LeagueMono-VF.ttf") format("truetype");
font-width: ultra-expanded; /* same as 200% */
}
p:nth-child(1) {
font-family: "League Mono Ultra Condensed", sans-serif;
}
p:nth-child(2) {
font-family: "League Mono Normal", sans-serif;
}
p:nth-child(3) {
font-family: "League Mono Ultra Expanded", sans-serif;
}
Bereitstellung eines Font-Stretch-Fallbacks
Da font-width derzeit noch keine breite Browser-Unterstützung hat, möchten Sie möglicherweise den veralteten font-stretch Deskriptor als Fallback einfügen. Platzieren Sie font-stretch vor font-width, damit unterstützende Browser den modernen Deskriptor verwenden:
@font-face {
font-family: "MyFont";
src: url("myfont.woff2") format("woff2");
font-stretch: condensed; /* for browsers that don't support font-width */
font-width: condensed;
}
Hinweis:
Sie können dieses Fallback-Muster mit dem postcss-preset-env Plugin für PostCSS automatisieren, das die postcss-font-width-property Transformationen enthält, um font-width Deklarationen automatisch in font-stretch zu konvertieren.
Spezifikationen
| Specification |
|---|
| CSS Fonts Module Level 4 # descdef-font-face-font-width |
Browser-Kompatibilität
Siehe auch
- Legacy
font-stretchAlias Deskriptor mit besserer Browser-Unterstützung font-displayDeskriptorfont-familyDeskriptorfont-weightDeskriptorfont-styleDeskriptorfont-feature-settingsEigenschaftfont-variation-settingsDeskriptorsrcDeskriptorunicode-rangeDeskriptor