font-weight CSS at-rule descriptor

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 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, inklusive. Höhere Zahlen repräsentieren Gewichte, die fetter sind als (oder genauso fett wie) niedrigere Zahlen. Bestimmte häufig verwendete Werte entsprechen allgemeinen Gewichtsnamen, wie im Abschnitt Allgemeine Gewichtsnamenzuordnung unten beschrieben.

Allgemeine Gewichtsnamenzuordnung

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

Variable Schriften

Die meisten Schriften haben ein bestimmtes Gewicht, das einem der Zahlen in Allgemeine Gewichtsnamenzuordnung entspricht. Einige Schriften, sogenannte variable Schriften, können jedoch einen Bereich von Gewichten unterstützen mit mehr oder weniger feiner Granularität, 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.

Barrierefreiheit

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

• MDN Verständnis von WCAG, Leitlinie 1.4 Erklärungen
• Verständnis von 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

Auswählen von normalen und fetten Schriften

In diesem Beispiel inkludieren wir zwei Schriften, eine mit normalem Gewicht, eine mit fettem Gewicht, aus der "Fira Sans" Schriftfamilie mithilfe von zwei @font-face At-Regeln. 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 die font-weight Eigenschaft festgelegt wird. Beachten Sie, dass das <strong> HTML-Element ebenfalls die fette Schrift auswählt, da <strong> Elemente standardmäßig den CSS font-weight Eigenschaftswert 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

Einstellen von Schriftgewichtsbereichen

Dieses Beispiel demonstriert, wie Autoren mehrere Schriften für verschiedene Schriftgewichte (und Schriftstile) einbeziehen können, indem sie mehrere @font-face Deklarationen mit demselben font-family Wert verwenden. Durch das Festlegen der font-weight Deskriptoren mit Bereichen von 1 bis 1000 können Sie in den restlichen Stylesheets einen font-weight (oder font-style) deklarieren und wissen, dass die entsprechende 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 zu sehen. Jede Deklaration ist auf einen anderen Bereich von Schriftgewichtwerten festgelegt, aber alle verwenden denselben Schriftnamen.

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

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

Die CSS Kaskade sorgt dafür, dass die drei letzteren Deklarationen Teile des Bereichs überschreiben, der in der FiraSans-Regular Deklaration festgelegt wurde.

@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 FiraSans-ExtraBold, da sie später deklariert ist, die FiraSans-Bold für diesen Wert.

Ähnlich verwenden sowohl 100 als auch 300 die leichte Schrift; obwohl FiraSans-Regular und FiraSans-Light beide 300 in ihren Bereichen einschließen, wird FiraSans-Light später deklariert. Alternativ hätten wir FiraSans-Regular nach FiraSans-Light deklarieren können, aber dann müssten wir den Bereich des font-weight Deskriptors ändern.

Einstellen 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 der Verwendung einer variablen Schrift gesetzt werden können.

Wir fügen eine variable Schrift, "League Mono", mit einer einzigen @font-face At-Regel ein. Wir verwenden einen font-weight: 300 700 Wert, um den Bereich der verfügbaren Gewichte effektiv einzuschränken. Wenn eine CSS-Regel unsere "League Mono" Schrift verwendet, wird das Gewicht, wenn es außerhalb dieses Bereichs liegt, auf die Reichweite geklammert.

HTML

Wir fügen einen Absatz mit <output> ein, der zunächst auf 400 gesetzt ist, da dies das Standardschriftgewicht für nicht gestylten Absatztxt ist. Dieser Absatz ist zwischen zwei anderen Absätzen eingebettet, sodass Sie gerenderte und deklarierte Schriftgewichtwerte 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 Bereich des font-weight Deskriptors auf 300 700, um die variable Schrift auf diesen Bereich zu beschränken.

@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 ein, der den Wert der font-weight Eigenschaft des Absatzes aktualisiert und den Text zur Reflexion 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 des font-weight Deskriptors beschränkt.

Spezifikationen

Browser-Kompatibilität

Siehe auch

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