font-width
Hinweis:
Der font-width Deskriptor ist der moderne Ersatz für den font-stretch Deskriptor, der ein veraltetes Alias darstellt. 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 ermöglicht es Autoren, ein normales, komprimiertes oder erweitertes Schriftbild für die in der @font-face at-rule angegebenen Schriften zu spezifizieren.
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 Schriftbilds 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 einzigen Wert aus der unten stehenden Liste annehmen.
Werte
normal-
Gibt ein normal komprimiertes 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 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 es variablen Schriften, eine kontinuierliche Variation der Zeichenbreiten anzubieten. Für TrueType- oder OpenType-Variable Fonts wird die wdth Variation verwendet, um unterschiedliche Breiten zu implementieren.
Wenn die Schrift kein Bild bereitstellt, das genau dem angegebenen Wert entspricht, werden Werte kleiner als 100% auf ein komprimiertes Bild abgebildet, und Werte größer oder gleich 100% auf ein erweitertes Bild.
Zuordnung von Schlüsselwort zu numerischer Darstellung
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 Schriften haben eine bestimmte Breite, die einem der Schlüsselwortwerte entspricht. Variable Schriften können jedoch einen Bereich von Breiten mit feiner Granularität unterstützen, was dem Designer eine größere Kontrolle über das gewählte Gewicht gibt. Dafür sind Prozentbereich nützlich.
Für TrueType- oder OpenType-Variable Fonts wird die wdth Variation verwendet, um unterschiedliche Glyphebreiten zu implementieren.
Barrierefreiheit
Menschen mit Legasthenie und anderen kognitiven Einschränkungen könnten Schwierigkeiten beim Lesen von zu stark komprimierten Schriften haben, insbesondere wenn die Schrift ein niedriges Farbkontrastverhältnis 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
Einstellen eines Prozentsatzbereichs für font-width
Das folgende Beispiel verwendet die League Mono Schriftart. Es synthetisiert verschiedene Schriftfamilien aus derselben Schriftdatei, indem der font-width Deskriptor mit unterschiedlichen Schlüsselwörtern und Prozentsätzen verwendet wird.
<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;
}
Bereitstellen eines Fallbacks für font-stretch
Da font-width noch keine große Browser-Unterstützung hat, möchten Sie möglicherweise den veralteten font-stretch Deskriptor als Fallback einbeziehen. Platzieren Sie font-stretch vor font-width, damit unterstützende Browser den modernen Deskriptor verwenden:
@font-face {
font-family: "MyFont";
src: url("my-font.woff2") format("woff2");
font-stretch: condensed; /* for browsers that don't support font-width */
font-width: condensed;
}
Hinweis:
Sie können dieses Fallback-Muster mithilfe des postcss-preset-env Plugins für PostCSS automatisieren, das die postcss-font-width-property Umwandlung umfasst, 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
- Veralteter
font-stretchAlias Deskriptor mit besserer Browser-Unterstützung font-displayDeskriptorfont-familyDeskriptorfont-weightDeskriptorfont-styleDeskriptorfont-feature-settingsEigenschaftfont-variation-settingsDeskriptorsrcDeskriptorunicode-rangeDeskriptor