How to set font weight in CSS

醉折花枝作酒筹
Release: 2023-01-04 09:34:49
Original
17157 people have browsed it

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.

How to set font weight in CSS

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;
}
Copy after login
<p class="lighter">字体粗细: lighter</p>
<p class="normal">字体粗细: normal</p>
<p class="bold">字体粗细: bold</p>
<p class="bolder">字体粗细: bolder</p>
Copy after login

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

How to set font weight in CSS

#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

How to set font weight in CSS

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!

Related labels:
css
source:php.cn
Statement of this Website
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
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!