font-weight

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

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

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

normal

Normales Schriftgewicht. Gleich wie 400.

bold

Fettes Schriftgewicht. Gleich wie 700.

<number>

Ein <number> Wert zwischen 1 und 1000, inklusive. Höhere Zahlen stehen für Gewichte, die fetter sind als (oder genauso fett wie) niedrigere Zahlen. Bestimmte häufig verwendete Werte entsprechen gängigen Gewichtsnamen, wie in der Mapping von häufigen Gewichtsnamen unten beschrieben.

Die numerischen Werte von 100 bis 900 entsprechen ungefähr den folgenden gängigen Gewichtsnamen:

Die meisten Schriften haben ein bestimmtes Gewicht, das einem der Zahlen in der Mapping von häufigen Gewichtsnamen 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 und bieten dem Designer so 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.

Personen mit Sehbehinderungen 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 geringes Kontrastverhältnis aufweist.

• MDN Verständnis von WCAG, Erläuterungen zur Richtlinie 1.4
• Verstehen des Erfolgskriteriums 1.4.8 | W3C Verständnis von WCAG 2.0

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

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

In diesem Beispiel verwenden wir zwei Schriften, eine mit normalem Gewicht, eine mit fettem Gewicht, aus der "Fira Sans" Schriftfamilie, indem wir zwei @font-face At-Regeln verwenden. Wir setzen font-weight Deskriptoren, um das Gewicht der Schriften abzugleichen.

Danach können CSS-Regeln die normale oder die fette Schrift für die "Fira Sans" Familie auswählen, indem sie die font-weight Eigenschaft setzen. Beachten Sie, dass das <strong> HTML-Element ebenfalls die fette Schrift auswählt, weil <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

Dieses Beispiel demonstriert, wie Autoren mehrere Schriften für mehrere Schriftgewichte (und -stile) einbinden können, indem sie mehrere @font-face Deklarationen mit demselben font-family Wert einfügen. Indem Sie die font-weight Deskriptoren von 1 bis 1000 festlegen, können Sie im Rest Ihrer Stylesheets ein font-weight (oder font-style) deklarieren und wissen, dass die passende Schrift 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 wird auf einen anderen Bereich von Schriftgewichtswerten gesetzt, aber alle verwenden denselben Schriftnamen.

Die erste Deklaration verwendet FiraSans-Regular und deren zugehöriger font-weight Bereich umfasst den gesamten möglichen Bereich der Schriftgewichtswerte.

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

• die leichte Schrift ist dem Bereich 1-300 zugeordnet
• die fette Schrift ist dem Bereich 500-700 zugeordnet
• die extra-fette Schrift ist dem Bereich 700-1000 zugeordnet

Das CSS Kaskadierung stellt sicher, dass die drei letzteren 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. Während font-weight: 700 sowohl die FiraSans-Bold als auch die FiraSans-ExtraBold Deklarationen abgleicht, überschreibt, da die FiraSans-ExtraBold später deklariert ist, diese die FiraSans-Bold für diesen Wert.

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

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

Wir fügen eine variable Schrift ein, "League Mono", durch die Verwendung einer einzelnen @font-face At-Regel. 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" Schrift verwendet, wird das Gewicht, wenn es außerhalb dieses Bereichs liegt, auf den Bereich geklemmt.

HTML

Wir fügen einen Absatz mit <output> ein, der initial auf 400 gesetzt ist, da dies das Standard-Schriftgewicht für ungestylten Absatztext ist. Dieser Absatz ist zwischen zwei anderen Absätzen eingefügt, sodass Sie gerenderte gegenüber deklarierte Schriftgewichtswerte vergleichen können.

Wir fügen ein <input/range> vom Typ range hinzu, eingekapselt in ein <label>, wobei der step auf 50 gesetzt wird.

<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 size:
  <input type="range" min="50" max="1000" step="50" value="400" />
</label>

CSS

Wir setzen den font-weight Deskriptorbereich auf 300 700, um die variable Schrift auf diesen Bereich zu klemmen.

@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 Ereignishandler hinzu, der den font-weight Eigenschaftswert des Absatzes aktualisiert und den Text spiegelt, um die Veränderung zu reflektieren:

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

Ändern Sie das Schriftgewicht des Absatzes über den Bereich. Beachten Sie, dass der Beispielabsatz nicht leichter als der 300 Absatz darüber oder fetter als der 700 Absatz darunter wird; das Schriftgewicht ist auf den durch den font-weight Deskriptor definierten Bereich geklemmt.

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