CSS-At-Rule-Deskriptor 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 Deskriptor font-width akzeptiert einen einzelnen Wert aus der folgenden Liste.

Werte

normal

Gibt eine Schriftvariante mit normaler Breite an.

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

Gibt eine schmalere Schriftvariante als normal an, wobei ultra-condensed am schmalsten ist.

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

Gibt eine breitere Schriftvariante als normal an, wobei ultra-expanded am breitesten ist.

<percentage>

Ein <percentage>-Wert zwischen 50 % und 200 % (einschließlich). Negative Werte sind für diesen Deskriptor nicht zulässig.

In früheren Versionen der Spezifikation für font-width akzeptierte der Deskriptor nur die neun Schlüsselwortwerte. CSS Fonts Level 4 erweitert die Syntax um einen <percentage>-Wert. Dadurch können variable Schriftarten eine kontinuierliche Abstufung der Zeichenbreiten anbieten. Bei variablen TrueType- oder OpenType-Schriftarten wird die Variation wdth verwendet, um unterschiedliche Breiten umzusetzen.

Wenn die Schriftart keine Variante bereitstellt, die genau dem angegebenen Wert entspricht, werden Werte unter 100% einer schmalen Variante und Werte ab 100% einer breiten Variante zugeordnet.

Zuordnung von Schlüsselwörtern zu numerischen Werten

Die folgende Tabelle zeigt, welchen Prozentwerten die Schlüsselwörter entsprechen:

Variable Schriftarten

Die meisten Schriftarten haben eine bestimmte Breite, die einem der Schlüsselwortwerte entspricht. Variable Schriftarten können dagegen einen fein abgestuften Breitenbereich unterstützen. So haben Sie mehr Kontrolle über die gewählte Breite. Dafür eignen sich Prozentbereiche.

Bei variablen TrueType- oder OpenType-Schriftarten wird die Variation wdth verwendet, um unterschiedliche Glyphenbreiten umzusetzen.

Barrierefreiheit

Menschen mit Legasthenie oder anderen kognitiven Beeinträchtigungen können Schwierigkeiten haben, zu schmale Schriftarten zu lesen. Das gilt insbesondere, wenn die Schrift ein geringes Farbkontrastverhältnis aufweist.

• MDN: WCAG verstehen – Erläuterungen zu Richtlinie 1.4
• Erfolgskriterium 1.4.8 verstehen | W3C Understanding 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

Einen Prozentbereich für font-width festlegen

Das folgende Beispiel verwendet die Schriftart League Mono. Mithilfe des Deskriptors font-width und unterschiedlicher Schlüsselwörter und Prozentwerte erzeugt es verschiedene Schriftfamilien aus derselben Schriftdatei.

<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;
}

Einen font-stretch-Fallback bereitstellen

Da font-width noch nicht von vielen Browsern unterstützt wird, können Sie den älteren Deskriptor font-stretch als Fallback einfügen. Platzieren Sie font-stretch vor font-width, damit Browser, die den modernen Deskriptor unterstützen, diesen 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 Alias-Deskriptor font-stretch mit breiterer Browser-Unterstützung
• Deskriptor font-display
• Deskriptor font-family
• Deskriptor font-weight
• Deskriptor font-style
• Eigenschaft font-feature-settings
• Deskriptor font-variation-settings
• Deskriptor src
• Deskriptor unicode-range