CSS font-weight-Eigenschaft
Die font-weight-Eigenschaft wird verwendet, um die Fettdruckstärke einer Schriftart festzulegen. Einige Schriftarten unterstützen nur normale und fette Gewichte.
| Anfangswert | normal |
|---|---|
| Gilt für | Alle Elemente. Gilt auch für ::first-letter und ::first-line. |
| Vererbbar | Ja. |
| Animierbar | Ja. |
| Version | CSS1 |
| DOM-Syntax | object.style.fontWeight = "bolder"; |
Syntax
Syntax der CSS font-weight-Eigenschaft
css
font-weight: normal | bold | bolder | lighter | number | initial | inherit;Beispiel für die font-weight-Eigenschaft:
Beispiel der CSS font-weight-Eigenschaft mit dem Wert bolder
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p.bolder {
font-weight: bolder;
}
</style>
</head>
<body>
<h2>Font-weight property example</h2>
<p class="bolder">We used a bolder text here.</p>
</body>
</html>Ergebnis
Beispiel für die font-weight-Eigenschaft mit allen Werten:
Beispiel der CSS font-weight-Eigenschaft mit den Werten normal, lighter, bold, bolder und numerisch
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p.normal {
font-weight: normal;
}
p.lighter {
font-weight: lighter;
}
p.bold {
font-weight: bold;
}
p.bolder {
font-weight: bolder;
}
p.fweight {
font-weight: 600;
}
</style>
</head>
<body>
<h2>Font-weight property example</h2>
<p class="normal">We used normal weight here.</p>
<p class="lighter">This is a lighter weight.</p>
<p class="bold">We used bold weight here.</p>
<p class="bolder">We used a bolder text here.</p>
<p class="fweight">We set font-weight 600 here.</p>
</body>
</html>Werte
| Wert | Beschreibung | Testen |
|---|---|---|
| normal | Gibt ein normales Gewicht an. Dies ist der Standardwert. | Testen » |
| bold | Gibt ein fettes Gewicht an (entspricht 700). | Testen » |
| bolder | Gibt ein Gewicht an, das eine Stufe schwerer ist als der berechnete Wert des Elternelements. | Testen » |
| lighter | Gibt ein Gewicht an, das eine Stufe leichter ist als der berechnete Wert des Elternelements. | Testen » |
| 100 200 300 400 500 600 700 800 900 | Legt ein numerisches Gewicht von dünn (100) bis fett (900) fest. 400 entspricht normal und 700 entspricht bold. | Testen » |
| initial | Setzt die Eigenschaft auf ihren Standardwert zurück. | Testen » |
| inherit | Erbt die Eigenschaft vom Elternelement. |
Praxis
Welche Eigenschaften gibt die CSS-Eigenschaft 'font-weight' an?