font-width CSS at-rule descriptor

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 nachstehenden Liste annehmen.

Werte

normal

Gibt ein normalerweise verengtes Schriftbild an.

semi-condensed, condensed, extra-condensed, ultra-condensed

Gibt ein stärker verengtes Schriftbild als normal an, wobei ultra-condensed das am stärksten verengte darstellt.

semi-expanded, expanded, extra-expanded, ultra-expanded

Gibt ein stärker erweitertes Schriftbild als normal an, wobei ultra-expanded das am weitesten erweiterte darstellt.

<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 akzeptiert 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 Buchstabenbreiten zu bieten. Für TrueType oder OpenType variable Schriftarten wird die wdth Variation verwendet, um unterschiedliche Breiten zu implementieren.

Wenn die Schriftart kein Schriftbild bietet, das genau dem angegebenen Wert entspricht, werden Werte unter 100% einem verengten Schriftbild zugeordnet, und Werte größer oder gleich 100% einem erweiterten Schriftbild.

Zuordnung von Schlüsselwort zu numerischem Wert

Die nachstehende Tabelle zeigt die Zuordnung zwischen Schlüsselwortwerten und numerischen Prozent:

Variable Fonts

Die meisten Schriftarten haben eine bestimmte Breite, die einem der Schlüsselwortwerte entspricht. Variable Schriftarten hingegen können 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 Prozentsatzbereiche nützlich.

Für TrueType oder OpenType variable Schriftarten wird die wdth Variation verwendet, um unterschiedliche Glyphenbreiten zu implementieren.

Barrierefreiheit

Personen mit Legasthenie und anderen kognitiven Bedingungen können Schwierigkeiten haben, Schriften zu lesen, die zu stark verengt sind, insbesondere wenn die Schrift ein niedriges Farbkontrastverhältnis hat.

• MDN Verständnis von WCAG, Leitlinie 1.4 Erklärungen
• Verständnis des Erfolgskriteriums 1.4.8 | W3C Verständnis von WCAG 2.0

Formale Definition

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 Prozentsatzbereichs für font-width

Das folgende Beispiel verwendet die League Mono Schriftart. Es synthetisiert verschiedene Schriftfamilien aus derselben Schriftdatei mit dem font-width Deskriptor, der mit verschiedenen Schlüsselwörtern und Prozentsätzen arbeitet.

<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 Font-Stretch-Fallbacks

Da font-width derzeit noch keine breite Browser-Unterstützung hat, möchten Sie möglicherweise den alten font-stretch Deskriptor als Fallback einschließen. Platzieren Sie font-stretch vor font-width, sodass 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;
}

Spezifikationen

Browser-Kompatibilität

Siehe auch

• Veralteter font-stretch Alias Deskriptor mit besserer Browser-Unterstützung
• font-display Deskriptor
• font-family Deskriptor
• font-weight Deskriptor
• font-style Deskriptor
• font-feature-settings Eigenschaft
• font-variation-settings Deskriptor
• src Deskriptor
• unicode-range Deskriptor