Home  >  Article  >  Web Front-end  >  What is the attribute of css to set font thickness?

What is the attribute of css to set font thickness?

青灯夜游
青灯夜游Original
2021-03-22 13:44:338716browse

The css attribute for setting font thickness is the font-weight attribute. The values ​​of this attribute are "lighter", "normal", "bold" and "bolder"; "lighter" is thin, "normal" is normal weight, "bold" is bold, and "bolder" is extra bold.

What is the attribute of css to set font thickness?

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

In CSS, the font-weight attribute is used to set the thickness value of the font. The value is lighter | normal | bold | bolder, and the default is normal. Lighter is a thin font, normal is a normal weight, bold is a bold font, and bolder is an extra bold font. 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:

What is the attribute of css to set font thickness?

[Recommended tutorial: CSS video tutorial]

In order to achieve more detailed control, CSS It is also allowed to use numbers to set the font weight. 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:

What is the attribute of css to set font thickness?

The browser will automatically add bold format to some elements (such as strong, h1~h6 and b). Some elements It also inherits the bold format of the parent element, and can cancel the bold format of these elements through font-weight: normal.

For more programming related knowledge, please visit: Programming Video! !

The above is the detailed content of What is the attribute of css to set font thickness?. For more information, please follow other related articles on the PHP Chinese website!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn