font-weight

/* <font-weight-absolute> keyword values */
font-weight: normal;
font-weight: bold;

/* <font-weight-absolute> numeric values [1,1000] */
font-weight: 100;
font-weight: 200;
font-weight: 300;
font-weight: 400; /* normal */
font-weight: 500;
font-weight: 600;
font-weight: 700; /* bold */
font-weight: 800;
font-weight: 900;

/* Keyword values relative to the parent */
font-weight: lighter;
font-weight: bolder;

/* Global values */
font-weight: inherit;
font-weight: initial;
font-weight: revert;
font-weight: revert-layer;
font-weight: unset;

Die font-weight Eigenschaft wird entweder mit einem <font-weight-absolute> Wert oder einem relativen Gewichtswert angegeben, wie unten aufgeführt.

normal

Normales Schriftgewicht. Entspricht 400.

bold

Fettschrift. Entspricht 700.

<number>

Ein <number> Wert zwischen 1 und 1000, einschließlich beider Werte. Höhere Zahlen repräsentieren Gewichte, die kräftiger sind als (oder genauso kräftig wie) niedrigere Zahlen. Dies ermöglicht eine feine Kontrolle über variable Schriftarten. Bei nicht variablen Schriftarten wird, falls das genau angegebene Gewicht nicht verfügbar ist, ein Fallback-Gewicht Algorithmus verwendet — numerische Werte, die durch 100 teilbar sind, entsprechen den gebräuchlichen Gewichtsnamen, wie im Abschnitt Mapping von häufigen Gewichtsnamen unten beschrieben.

lighter

Ein relatives Schriftgewicht leichter als das Elternelement. Beachten Sie, dass nur vier Schriftgewichte für die Berechnung relativem Gewicht berücksichtigt werden; siehe den Abschnitt Bedeutung relativer Gewichte unten.

bolder

Ein relatives Schriftgewicht schwerer als das Elternelement. Beachten Sie, dass nur vier Schriftgewichte für die Berechnung relativem Gewicht berücksichtigt werden; siehe den Abschnitt Bedeutung relativer Gewichte unten.

Wenn das genaue angegebene Gewicht nicht verfügbar ist, wird die folgende Regel verwendet, um das tatsächlich gerenderte Gewicht zu bestimmen:

• Wenn das angegebene Zielgewicht zwischen 400 und 500 (einschließlich) liegt:

  • Suchen Sie nach verfügbaren Gewichten zwischen dem Ziel und 500 in aufsteigender Reihenfolge.
  • Wenn keine Übereinstimmung gefunden wird, suchen Sie nach verfügbaren Gewichten unterhalb des Ziels in absteigender Reihenfolge.
  • Wenn keine Übereinstimmung gefunden wird, suchen Sie nach verfügbaren Gewichten über 500 in aufsteigender Reihenfolge.

• Wenn ein Gewicht kleiner als 400 angegeben wird, suchen Sie nach verfügbaren Gewichten unterhalb des Ziels in absteigender Reihenfolge. Wenn keine Übereinstimmung gefunden wird, suchen Sie nach verfügbaren Gewichten größer als das Ziel in aufsteigender Reihenfolge.

• Wenn ein Gewicht größer als 500 angegeben wird, suchen Sie nach verfügbaren Gewichten über dem Ziel in aufsteigender Reihenfolge. Wenn keine Übereinstimmung gefunden wird, suchen Sie nach verfügbaren Gewichten kleiner als das Ziel in absteigender Reihenfolge.

Wenn lighter oder bolder angegeben ist, zeigt die folgende Tabelle, wie das absolute Schriftgewicht des Elements bestimmt wird.

Beachten Sie, dass bei der Verwendung relativer Gewichte nur vier Schriftgewichte berücksichtigt werden — dünn (100), normal (400), fett (700) und schwer (900). Falls eine Schriftfamilie mehr Gewichte verfügbar hat, werden diese für die Berechnung relativen Gewichts ignoriert.

Die numerischen Werte 100 bis 900 entsprechen grob den folgenden häufigen Gewichtsnamen (siehe die OpenType-Spezifikation):

Während viele Schriftarten ein bestimmtes Gewicht haben, das einem der Zahlen im Mapping von häufigen Gewichtsnamen entspricht, unterstützen die meisten variablen Schriftarten einen Bereich von Gewichten, der viel feinere Granularität bietet, was Designern und Entwicklern mehr Kontrolle über das gewählte Gewicht verleiht.

Für TrueType oder OpenType variable Schriftarten wird die "wght" Variation verwendet, um unterschiedliche Breiten zu implementieren.

Diese Demo lädt mit font-weight: 500; eingestellt. Ändern Sie den Wert der font-weight Eigenschaft im .sample Selektor, um das Gewicht des Textes zu ändern (z.B. 200, 700). Klicken Sie auf "Play" in den unten stehenden Code-Blöcken, um das Beispiel im MDN Playground zu bearbeiten:

<p class="sample">
  ...it would not be wonderful to meet a Megalosaurus, forty feet long or so,
  waddling like an elephantine lizard up Holborn Hill.
</p>

@font-face {
  src: url("https://mdn.github.io/shared-assets/fonts/variable-fonts/MutatorSans.ttf");
  font-family: "MutatorSans";
  font-style: normal;
  font-weight: 1 1000;
}

.sample {
  text-transform: uppercase;
  font-weight: 500;
  font:
    1.5rem "MutatorSans",
    sans-serif;
}

Personen mit Sehbehinderung können Schwierigkeiten haben, Text zu lesen, der mit einem font-weight Wert von 100 (Dünn/Hairline) oder 200 (Extra Licht) gesetzt ist, insbesondere wenn die Schriftart ein geringes Kontrastverhältnis aufweist.

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

font-weight = 
  <font-weight-absolute>  |
  bolder                  |
  lighter                 

<font-weight-absolute> = 
  normal             |
  bold               |
  <number [1,1000]>  

HTML

<p>
  Alice was beginning to get very tired of sitting by her sister on the bank,
  and of having nothing to do: once or twice she had peeped into the book her
  sister was reading, but it had no pictures or conversations in it, "and what
  is the use of a book," thought Alice "without pictures or conversations?"
</p>

<div>
  I'm heavy<br />
  <span>I'm lighter</span>
</div>

CSS

/* Set paragraph text to be bold. */
p {
  font-weight: bold;
}

/* Set div text to two steps heavier than
   normal but less than a standard bold. */
div {
  font-weight: 600;
}

/* Set span text to be one step lighter
   than its parent. */
span {
  font-weight: lighter;
}

Ergebnis

• font-family
• font-style
• Grundlegende Text- und Schriftgestaltung
• CSS-Schriftarten Modul