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. Entspricht 400.

bold

Fettes Schriftgewicht. Entspricht 700.

<number>

Ein <number> Wert zwischen 1 und 1000, inklusiv. Höhere Zahlen repräsentieren Gewichte, die fetter sind als (oder ebenso fett wie) niedrigere Zahlen. Einige gängige Werte entsprechen den üblichen Namen von Gewichten, wie in der unten beschriebenen Zuweisung der üblichen Gewichtsnamen.

Die numerischen Werte 100 bis 900 entsprechen grob den folgenden üblichen Gewichtsnamen:

Die meisten Schriften haben ein bestimmtes Gewicht, das einem der Zahlen in der Zuweisung der üblichen Gewichtsnamen entspricht. Einige Schriften, sogenannte variable Schriften, können jedoch einen Bereich von Gewichten mit mehr oder weniger feiner Granularität unterstützen, und dies kann dem Designer eine viel genauere Kontrolle über das gewählte Gewicht geben.

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

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

• MDN Verständnis von WCAG, Erläuterungen zu Richtlinie 1.4
• Verständnis von Erfolgskriterium 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 enthalten wir zwei Schriften, eine mit normalem Gewicht und eine mit fettem Gewicht, aus der "Fira Sans" Schriftfamilie mithilfe von zwei @font-face Regeln. Wir setzen font-weight Deskriptoren, um das Gewicht der Schriften anzupassen.

Danach können CSS-Regeln die normale oder die fette Schrift für die "Fira Sans"-Familie einfach durch Setzen der font-weight Eigenschaft auswählen. Beachten Sie, dass das <strong> HTML-Element auch 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

Dieses Beispiel zeigt, wie Autoren mehrere Schriften für mehrere Schriftgewichte (und Schriftstile) einbinden können, indem sie mehrere @font-face Deklarationen mit demselben font-family Wert einfügen. Indem Sie die font-weight Deskriptoren mit Bereichen von 1 bis 1000 festlegen, können Sie im Rest Ihrer Stylesheets ein font-weight (oder font-style) deklarieren und wissen, dass die geeignete 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 hinzu, wie im vorherigen Beispiel gesehen. Jede Deklaration ist auf einen anderen Bereich von Schriftgewichtswerten eingestellt, aber alle verwenden denselben Schriftartnamen.

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

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 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 Cascade stellt sicher, dass die drei letztgenannten Deklarationen Teile des in der FiraSans-Regular Deklaration festgelegten Bereichs überschreiben.

@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 trifft, überschreibt die später deklarierte FiraSans-ExtraBold die FiraSans-Bold für diesen Wert.

Ähnlich verwenden 100 und 300 beide 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, hätten aber den font-weight Deskriptorbereich ändern müssen, wenn wir so vorgehen.

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

Wir fügen eine variable Schriftart, "League Mono", mithilfe einer einzigen @font-face Regel hinzu. Wir verwenden einen Wert von font-weight: 300 700, 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 auf den Bereich geklammert.

HTML

Wir fügen einen Absatz mit <output> hinzu, der zunächst auf 400 gesetzt ist, da dies das Standard-Schriftgewicht für ungestylten Absatztext ist. Dieser Absatz ist zwischen zwei anderen Absätzen eingebettet, sodass Sie die gerenderten und die deklarierten Schriftgewichtswerte vergleichen können.

Wir fügen einen <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 klemmen die variable Schriftart 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 Ereignishandler hinzu, der den font-weight Eigenschaftswert des Absatzes aktualisiert und den Text zur Darstellung 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

Ä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 Bereich beschränkt, der durch den font-weight Deskriptor definiert ist.

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