font-weight

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Der font-weight CSS-Deskriptor ermöglicht es Autoren, Schriftstärken für die im @font-face-At-Regel spezifizierten Schriftarten anzugeben. Die font-weight-Eigenschaft kann separat verwendet werden, um festzulegen, wie dick oder dünn Zeichen im Text angezeigt werden sollen.

Für eine bestimmte Schriftfamilie können Autoren verschiedene Schriftschnitte herunterladen, die den verschiedenen Stilen derselben Schriftfamilie entsprechen, und dann den font-weight-Deskriptor verwenden, um die Schriftstärken der Schriftarten explizit festzulegen. Die Werte für den CSS-Deskriptor sind dieselben wie für die entsprechende Schrifteigenschaft.

Es sind in der Regel nur begrenzte Schriftstärken für eine bestimmte Schriftfamilie verfügbar. Wenn eine angegebene Stärke nicht existiert, wird eine nahegelegene Stärke verwendet. Schriftarten ohne fette Type werden oft vom Benutzeragenten synthetisiert. Um dies zu verhindern, verwenden Sie die font-synthesis-Kurzschreibweise.

Syntax

css
/* Single values */
font-weight: normal;
font-weight: bold;
font-weight: 400;

/* Multiple Values */
font-weight: normal bold;
font-weight: 300 500;

Die font-weight-Eigenschaft wird mit einem der unten aufgeführten Werte beschrieben.

Werte

normal

Normale Schriftstärke. Entspricht 400.

bold

Fette Schriftstärke. Entspricht 700.

<number>

Ein <number>-Wert zwischen 1 und 1000, einschließlich. Höhere Zahlen repräsentieren schwerere (oder ebenso schwere) Gewichte als niedrigere Zahlen. Bestimmte häufig verwendete Werte entsprechen gängigen Gewichtsnamen, wie im Abschnitt Allgemeine Gewichtsnamen-Zuordnung unten beschrieben.

In früheren Versionen der font-weight-Spezifikation akzeptiert die Eigenschaft nur Schlüsselwortwerte und die numerischen Werte 100, 200, 300, 400, 500, 600, 700, 800 und 900; nicht-variable Schriftarten können wirklich nur diese festgelegten Werte nutzen, obwohl feiner abgestufte Werte (z. B. 451) für nicht-variable Schriftarten in einen dieser Werte übersetzt werden.

CSS Fonts Level 4 erweitert die Syntax, um jede Zahl zwischen 1 und 1000, einschließlich, zu akzeptieren, und führt Variable Fonts ein, die diesen viel feiner abgestuften Bereich von Schriftstärken nutzen können.

Allgemeine Gewichtsnamen-Zuordnung

Die numerischen Werte 100 bis 900 entsprechen ungefähr den folgenden allgemeinen Gewichtsnamen:

Wert Allgemeiner Gewichtname
100 Dünn (Hairline)
200 Extra Leicht (Ultra Leicht)
300 Leicht
400 Normal
500 Mittel
600 Halbfett (Demi Fett)
700 Fett
800 Extra Fett (Ultra Fett)
900 Schwarz (Schwer)

Variable Fonts

Die meisten Schriftarten haben eine bestimmte Gewichtung, die einem der Zahlen in Allgemeine Gewichtsnamen-Zuordnung entspricht. Einige Schriftarten, sogenannte Variable Fonts, können jedoch einen Bereich von Gewichtungen mit mehr oder weniger feiner Granularität unterstützen, was dem Designer eine viel genauere Kontrolle über das gewählte Gewicht ermöglicht.

Für TrueType- oder OpenType-Variable-Fonts wird die "wght"-Variation verwendet, um variierende Gewichtungen zu implementieren.

Barrierefreiheit

Menschen mit Sehschwäche können Schwierigkeiten beim Lesen von Text haben, der mit einem font-weight-Wert von 100 (Dünn/Hairline) oder 200 (Extra Leicht) eingerichtet ist, insbesondere wenn die Schriftart ein niedriges Kontrastverhältnis aufweist.

Formale Definition

Zugehörige @-Regel@font-face
Initialer Wertnormal
Berechneter Wertwie angegeben

Formale Syntax

font-weight = 
  auto                         |
  <font-weight-absolute>{1,2}  

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

Beispiele

Normalgewicht in einer @font-face-Regel setzen

Das folgende Beispiel findet eine lokale Open Sans-Schriftart oder importiert sie und ermöglicht die Verwendung der Schriftart für normale Schriftstärken.

css
@font-face {
  font-family: "Open Sans";
  src:
    local("Open Sans") format("woff2"),
    url("/fonts/OpenSans-Regular-webfont.woff") format("woff");
  font-weight: 400;
}

Spezifikationen

Specification
CSS Fonts Module Level 4
# font-prop-desc

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch