font-width

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

Spezifiziert ein normales komprimiertes Schriftschnitt.

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

Spezifiziert einen stärker komprimierten Schriftschnitt als normal, wobei ultra-condensed der am stärksten komprimierte ist.

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

Spezifiziert einen stärker erweiterten Schriftschnitt als normal, wobei ultra-expanded der 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üsselwort-Werte. 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-Schriften wird die wdth-Variation verwendet, um unterschiedliche Breiten zu implementieren.

Wenn die Schriftart kein Gesicht bietet, das genau mit dem angegebenen Wert übereinstimmt, werden Werte unter 100% einem komprimierten Gesicht zugeordnet, und Werte größer oder gleich 100% werden einem erweiterten Gesicht zugeordnet.

Zuordnung von Schlüsselwörtern zu numerischen Werten

Die folgende Tabelle zeigt die Zuordnung zwischen Schlüsselwortwerten und numerischen Prozenten:

Variable Schriften

Die meisten Schriften haben eine bestimmte Breite, die einem der Schlüsselbegriff-Werte entspricht. Variable Schriften können jedoch einen Bereich von Breiten mit feiner Granularität unterstützen, was dem Designer mehr Kontrolle über das gewählte Gewicht gibt. Für diesen Zweck sind Prozentsatzbereiche nützlich.

Für TrueType- oder OpenType-Variable-Schriften wird die wdth-Variation verwendet, um unterschiedliche Glyphenbreiten zu implementieren.

Barrierefreiheit

Menschen mit Dyslexie und anderen kognitiven Bedingungen können Schwierigkeiten haben, komprimierte Schriften zu lesen, insbesondere wenn die Schrift eine geringe Farbkontrastverhältnis hat.

• MDN Verständnis von WCAG, Leitlinie 1.4 Erklärungen
• Verständigung 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

Einstellen eines Prozentsatzbereichs für font-width

Das folgende Beispiel verwendet die League Mono Schriftart. Es synthetisiert verschiedene Schriftfamilien aus derselben Schriftdatei unter Verwendung des font-width-Deskriptors mit unterschiedlichen 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;
}

Bereitstellen eines Font-Stretch-Fallbacks

Da font-width 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ützte 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