font-weight

Syntax

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

/* Defining a range */
font-weight: normal bold;
font-weight: 300 500;

Werte

Der font-weight Deskriptor nimmt eine der folgenden Formen an:

• Das Schlüsselwort auto.
• Ein einzelner <font-weight-absolute> Wert.
• Ein Paar <font-weight-absolute> Werte, durch ein Leerzeichen getrennt.

Jeder <font-weight-absolute> kann einer der folgenden Werte sein:

normal

Normales Schriftgewicht. Entspricht 400.

bold

Fettes Schriftgewicht. Entspricht 700.

<number>

Ein <number> Wert zwischen 1 und 1000, einschließlich. Höhere Zahlen repräsentieren Gewichte, die fetter (oder genauso fett) wie niedrigere Zahlen sind. Einige häufig verwendete Werte entsprechen gängigen Gewichtsbezeichnungen, wie in der untenstehenden Häufige Gewichtsbezeichnung Abschnitt beschrieben.

Häufige Gewichtsbezeichnung

Die numerischen Werte 100 bis 900 entsprechen in etwa den folgenden gängigen Gewichtsbezeichnungen:

Variable Schriften

Die meisten Schriften haben ein bestimmtes Gewicht, das einem der Zahlen in Häufige Gewichtsbezeichnung entspricht. Einige Schriften, die als variable Schriften bezeichnet werden, können jedoch einen Bereich von Gewichten mit mehr oder weniger feiner Granularität unterstützen. Dies bietet dem Designer eine viel genauere Kontrolle über das gewählte Gewicht.

Für TrueType- oder OpenType-Variable-Schriften wird die "wght"-Variation verwendet, um unterschiedliche Gewichte zu implementieren.

Barrierefreiheit

Personen mit Sehbeeinträchtigungen könnten Schwierigkeiten beim Lesen von Text haben, der mit einem font-weight Wert von 100 (Dünn/Haarlinie) oder 200 (Extra Leicht) gesetzt ist, insbesondere wenn die Schrift ein niedriges Kontrastverhältnis aufweist.

• MDN Verständnis von WCAG, Leitfaden 1.4 Erklärungen
• Erklärung zum Erfolgskriterium 1.4.8 | W3C Verständnis von WCAG 2.0

Formale Definition

Formale Syntax

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

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

Beispiele

Auswahl normaler und fetter Schriften

In diesem Beispiel beziehen wir zwei Schriften ein - eine normale und eine fette - aus der "Fira Sans" Schriftfamilie mithilfe von zwei @font-face At-Regeln. Wir setzen font-weight Deskriptoren, um das Gewicht der Schriften anzupassen.

Nach diesem Schritt können CSS-Regeln die normale oder fette Schrift für die "Fira Sans" Familie auswählen, indem sie einfach die font-weight Eigenschaft setzen. Beachten Sie, dass das <strong> HTML-Element ebenfalls die fette Schrift auswählt, da <strong> Elemente standardmäßig einen CSS font-weight Eigenschaftswert von bold haben.

HTML

<p class="one">Fira Sans, `normal` weight paragraph</p>
<p class="two">Fira Sans, `bold` weight paragraph</p>
<p><strong>Fira Sans, &lt;strong&gt; element (`bold`)</strong></p>

CSS

@font-face {
  font-family: "Fira Sans";
  font-weight: normal;
  src: url("https://mdn.github.io/shared-assets/fonts/FiraSans-Regular.woff2");
}

@font-face {
  font-family: "Fira Sans";
  font-weight: bold;
  src: url("https://mdn.github.io/shared-assets/fonts/FiraSans-Bold.woff2");
}

body {
  font-family: "Fira Sans", serif;
  font-size: 2rem;
}

p.one {
  font-weight: normal;
}

p.two {
  font-weight: bold;
}

Ergebnis

Festlegen von Schriftgewichtsbereichen

Dieses Beispiel zeigt, wie Autoren mehrere Schriften für mehrere Schriftgewichte (und Schriftarten) einbinden können, indem sie mehrere @font-face Deklarationen mit dem gleichen font-family Wert einfügen. Durch das Festlegen der font-weight Deskriptoren mit Bereichen von 1 bis 1000 können Sie im Rest Ihres Stylesheets ein font-weight (oder font-style) deklarieren und sicherstellen, dass die passende Schriftart verwendet wird.

HTML

<p class="one">This has a font weight of 100</p>
<p class="three">This has a font weight of 300</p>
<p class="four">This has a font weight of 400</p>
<p class="five">This has a font weight of 500</p>
<p class="seven">This has a font weight of 700</p>
<p class="nine">This has a font weight of 900</p>

CSS

Wir fügen vier @font-face Deklarationen für vier verschiedene Schriften aus der FireSans Schriftfamilie ein, wie im vorherigen Beispiel gezeigt. Jede Deklaration ist auf einen anderen Bereich von Schriftgewichts-Werten gesetzt, aber alle verwenden den gleichen Schriftartennamen.

Die erste Deklaration verwendet FiraSans-Regular und ihr zugehöriger font-weight Bereich umfasst den gesamten möglichen Bereich von Schriftgewichtswerten.

Die anderen drei Deklarationen verwenden die leichte, fette und extra-fette Version der Schrift, und ihre zugehörigen font-weight Bereiche definieren Teilbereiche des Bereichs wie folgt:

• Die leichte Schrift ist mit dem Bereich 1-300 assoziiert
• Die fette Schrift ist mit dem Bereich 500-700 assoziiert
• Die extra-fette Schrift ist mit dem Bereich 700-1000 assoziiert

Die CSS Kaskade stellt sicher, dass die drei letztgenannten Deklarationen Teile des Bereichs überschreiben, die in der FiraSans-Regular Deklaration festgelegt wurden.

@font-face {
  font-family: "Fira Sans";
  font-weight: 1 1000;
  src: url("https://mdn.github.io/shared-assets/fonts/FiraSans-Regular.woff2");
}

@font-face {
  font-family: "Fira Sans";
  font-weight: 1 300;
  src: url("https://mdn.github.io/shared-assets/fonts/FiraSans-Light.woff2");
}

@font-face {
  font-family: "Fira Sans";
  font-weight: 500 700;
  src: url("https://mdn.github.io/shared-assets/fonts/FiraSans-Bold.woff2");
}

@font-face {
  font-family: "Fira Sans";
  font-weight: 700 1000;
  src: url("https://mdn.github.io/shared-assets/fonts/FiraSans-ExtraBold.woff2");
}

body {
  font-family: "Fira Sans", serif;
  font-size: 2rem;
}

p.one {
  font-weight: 100;
}

p.three {
  font-weight: 300;
}

p.four {
  font-weight: 400;
}

p.five {
  font-weight: 500;
}

p.seven {
  font-weight: 700;
}

p.nine {
  font-weight: 900;
}

Ergebnis

Der seven Absatz verwendet die extra fette Schrift. Obwohl font-weight: 700 sowohl mit den FiraSans-Bold als auch FiraSans-ExtraBold Deklarationen übereinstimmt, überschreibt FiraSans-ExtraBold, da es später deklariert wurde, FiraSans-Bold für diesen Wert.

Ebenso verwenden sowohl 100 als auch 300 die leichte Schrift; obwohl sowohl FiraSans-Regular als auch FiraSans-Light 300 in ihren Bereichen beinhalten, ist FiraSans-Light später deklariert. Alternativ hätten wir FiraSans-Regular nach FiraSans-Light deklarieren können, aber wir müssten den font-weight Deskriptorbereich ändern, wenn wir dies tun.

Festlegen eines Bereichs für eine variable Schrift

In diesem Beispiel verwenden wir den font-weight Deskriptor, um den Bereich der Gewichte einzuschränken, die bei Verwendung einer variablen Schriftart gesetzt werden können.

Wir fügen eine variable Schriftart, "League Mono", anhand einer einzigen @font-face At-Regel hinzu. Wir verwenden einen font-weight: 300 700 Wert, um den Bereich der verfügbaren Gewichte effektiv zu begrenzen. Wenn eine CSS-Regel unsere "League Mono" Schriftart verwendet und ein Gewicht außerhalb dieses Bereichs angibt, wird das Gewicht an den Bereich angepasst.

HTML

Wir fügen einen Absatz mit <output> hinzu, der initial auf 400 gesetzt ist, da dies das Standardschriftgewicht für ungestylte Absatztexte ist. Dieser Absatz steht zwischen zwei anderen Absätzen, sodass Sie die dargestellten Schriftgewichte mit den deklarierten vergleichen können.

Wir fügen ein <input/range> vom Typ range in ein <label> ein und setzen den step auf 50.

<p>LeagueMono, font-weight: 300 (comparison)</p>
<p id="example">LeagueMono, font-weight: <output>400</output> (example)</p>
<p>LeagueMono, font-weight: 700 (comparison)</p>
<label
  >Change the font weight:
  <input type="range" min="50" max="1000" step="50" value="400" />
</label>

CSS

Wir setzen den font-weight Deskriptorbereich auf 300 700 und begrenzen damit die variable Schrift auf diesen Bereich.

@font-face {
  font-family: "LeagueMono";
  src: url("https://mdn.github.io/shared-assets/fonts/LeagueMono-VF.ttf");
  font-weight: 300 700;
}

p {
  font-family: "LeagueMono", serif;
  font-size: 1.5rem;
}

p:first-of-type {
  font-weight: 300;
}

p:last-of-type {
  font-weight: 700;
}

JavaScript

Wir fügen einen Ereignis-Handler hinzu, der den font-weight Eigenschaftswert des Absatzes aktualisiert und den Text entsprechend der Änderung aktualisiert:

const text = document.querySelector("#example");
const log = document.querySelector("output");
const range = document.querySelector("input");

range.addEventListener("change", () => {
  text.style.fontWeight = range.value;
  log.innerText = range.value;
});

Ergebnis

Verändern Sie das Schriftgewicht des Absatzes über den Bereich. Beachten Sie, dass der Beispielabsatz weder leichter als der 300 Absatz darüber noch fetter als der 700 Absatz darunter wird; das Schriftgewicht ist auf den Bereich beschränkt, der durch den font-weight Deskriptor definiert ist.

Spezifikationen

Browser-Kompatibilität

Siehe auch

• font-display
• font-family
• font-stretch
• font-style
• font-feature-settings
• font-variation-settings
• src
• unicode-range Deskriptor