CSS font-weight property
The font-weight property in CSS is known for setting the weight or the boldness of the font. The weights which are available, are dependent on the font-family which is currently set. The font-weight property may be specified as one of the keywords such as normal, bold, lighter, bolder, and numeric. 'normal' font-weight is similar to 400 and bold font weight is similar to 700.
Syntax of font-weight property
Following is the syntax for the font-weight property.
font-weight: normal|bold|bolder|lighter|number|initial|inherit;
Example: CSS font-weight property
Here in the example below, we are using the font-weight property with different border styles, colors, and different values. In this case, we have given the font-weight property using all the values of this property. We have given the font-weight as bold, 600, and lighter, Which means that the text or the paragraph gets bold, gets 600 weight and lighter wherever specified by us. You have the choice to give any title to your program and you can also indent your text and object according to your selection of colors or styles or variants, etc.
<!DOCTYPE html>
<html>
<head>
<title>The font-weight property in CSS</title>
<style type="text/css">
p {
font-weight: bold;
color: red;
}
div {
font-weight: 600;
}
span {
font-weight: lighter;
}
</style>
</head>
<body>
<p>Alice was beginning to get very tired of sitting by her sister on the bank, and of having nothing to do: once or twice she had peeped into the book her sister was reading, but it had no pictures or conversations in it, "and what is the use of a book," thought Alice "without pictures or conversations?"</p>
<div>I'm heavy
<br/> <span>I'm lighter</span>
</div>
</body>
</html>
Output:
Example 2: CSS font-weight property
Here in the example below, we are using the font-weight property with different border styles, colors and their different values. In this case, we have given the font-weight property as bolder, 100 and 800. So tje text or the paragraph gets a weight of 800 and 100 px as specified by us and also gets bolder.
<!DOCTYPE html>
<html>
<head>
<title>The font-weight property in CSS</title>
<style type="text/css">
p {
font-weight: bolder;
color: green;
}
div {
font-weight: 100;
}
span {
font-weight: 800;
}
</style>
</head>
<body>
<p>Alice was beginning to get very tired of sitting by her sister on the bank, and of having nothing to do: once or twice she had peeped into the book her sister was reading, but it had no pictures or conversations in it, "and what is the use of a book," thought Alice "without pictures or conversations?"</p>
<div>I'm heavy
<br/> <span>I'm lighter</span>
</div>
</body>
</html>
Output:
Live Example
Here in this live example, you can test the code and execute the example using different values or even edit the code example.
Browser Compatibility
There are many browsers which do not support all the latest CSS properties. Hence, while developing any webpage, if you are using any CSS property you must check the browser compatibility for that CSS property and then use it. It is of immense importance today when there is a large variety of web browsers available.
| Name of Browser |
Background size |
contain and cover |
| Chrome |
2 |
2 |
| Edge |
12 |
12 |
| Firefox |
1 |
1 |
| Internet Explorer |
3 |
3 |
| Opera |
3.5 |
3.5 |
| Safari |
1 |
1 |
| Webview Android |
1 |
1 |
| Chrome Android |
18 |
18 |
| Firefox Android |
4 |
4 |
| Opera Android |
10.1 |
10.1 |
| IOS Safari |
1 |
1 |
| Samsung Internet |
1.0 |
1.0 |
Conclusion
The initial value for the font-weight property in CSS is 'normal'. This property is applicable to all the elements and also to the '::first-letter' and '::first-line'. It is an inherited property. The computed value for this property is the keyword or the numeric value as specified with lighter and bolder transformed to a real value. The animation type for this property is a font weight.
