How to set font weight in CSS

In CSS, you can set the font thickness through the font-weight attribute; when the value of this attribute is set to "lighter", it is a thin style, when the value is "normal", it is a normal thickness, and when the value is " "bold" is the bold style, and "bolder" is the extra bold style.

The operating environment of this tutorial: Windows7 system, CSS3&&HTML5 version, Dell G3 computer.

CSS can carefully divide the thickness of the text, and can also change the bold text into a normal thickness display. The thickness of the text is set in CSS through the attribute: font-weight. The above code covers almost all text thickness values, and the font itself can be bold and become normal bold. For example:

.lighter {
    font-weight: lighter;
}
.normal {
    font-weight: normal;
}
.bold {
    font-weight: bold;
}
.bolder {
    font-weight: bolder;
}

<p class="lighter">字体粗细： lighter</p>
<p class="normal">字体粗细： normal</p>
<p class="bold">字体粗细： bold</p>
<p class="bolder">字体粗细： bolder</p>

The above code defines 4 fonts of different thicknesses, which become thicker in order. The running result is as shown in the figure

#In order to achieve more detailed control, CSS also allows the use of numbers to set the thickness of the font. The number must be an integer multiple of 100, and the value is between 100 and 900. The larger the value, the bolder the font. 400 is equivalent to normal and 700 is equivalent to bold. The results of different values ​​​​are as shown in the figure

The browser will automatically add bold format to some elements (such as strong, h1~h6 and b), and some elements will also inherit Parent element bold format, you can pass font-weight: normal to cancel the bold format of these elements.

Recommended learning: "css video tutorial"

The above is the detailed content of How to set font weight in CSS. For more information, please follow other related articles on the PHP Chinese website!