A detailed explanation of the font bold attribute font-weight and its working principle in CSS

font-weight allowed values ​​normal | bold | bolder | lighter | l00 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900

font- Initial value of weight normal

Can font-weight be inherited? Yes

Font-weight applies to all elements

To understand how the user agent determines the weight of the font deformation, let's start with the keywords 100 to 900, and then we'll look at how it is inherited.

These numerical keywords are used to define the mapping relationship with the related characteristics of the font, that is, the thickness of the font is divided into nine levels. For example, OpenType uses a nine-value numeric level. After the font has this level, these numbers are mapped directly to each level, such as 100 mapping to the lightest font distortion, and 900 corresponding to the heaviest font distortion.

In fact, there is no essential font weight convention in these numbers. CSS states that the font weight corresponding to each number must not be smaller than the font weight corresponding to the number before it.

In this way, 100, 200, 300 and 400 may all correspond to font deformations of the same thickness, while 500 and 600 may correspond to a thicker font deformation, and 700, 800 and 900 may correspond to another thicker font deformation. Bold font distortion.

This number is defined as the same as certain ordinary, and 700 corresponds to bold.

Font deformation names are equivalent. 400 is equivalent to normal

Other numbers do not correspond to any

font-weight attribute keywords, but they can correspond to ordinary font deformation names. If a font variant is tagged "Normal", "Regular", "Roman", or "Book", then it is assigned 400, and any font variant tagged "Medium" is assigned 500.

However, if the font variant marked "Medium" is the only available font, then it cannot correspond to 500.

If there are fewer than nine font weights in a given font family, the user agent has more work to do. In this case, it must fill the gaps in a predefined way:

If the value 500 is not assigned, it is given the same

font weight as 400.

If 300 is not allocated, it corresponds to a slightly lighter font variant than 400. If no lighter font is available, 300 corresponds to a grade just like 400. This is usually in the "Normal" and "Medium" cases. The same method is used for 100 and 200.

If 600 is not allocated, it corresponds to a slightly heavier font variant than 400. If no such font is available, 600 corresponds to a certain font variant just like 500. This method is also used on the 700, 800 and 900.

In order to facilitate understanding, let us look at three examples of

font weight allocation. First, assume that the font family Karrank% is an OpenType font, and 9 corresponding weights have been defined. class.

Here, these numbers correspond to each level, and the keywords normal and bold are assigned to 400 and 700 respectively. In the second example, we consider the font family Zurich, which was mentioned at the beginning of this article. Assume that its font variant is also assigned the weight value below.

Font form: Zurich Light Assigned keywords: empty Assigned numbers: 100,200,300

Font Form: Zurich Regular Assigned keyword: normal Assigned number: 400

Font form: Zurich Medium Assigned keyword: empty Assigned number :500

Font format: Zurich Bold Assigned keyword: bold Assigned number: 600,700

Font form: Zurich Black Assigned keyword: empty Number assigned: 800

Font form: Zurich UltraBlack Assigned keywords: null Assigned numbers: 900

The first three numbers are assigned to the lightest font. Normal fonts correspond to keywords 400 and normal.

Medium font is assigned to the number 500. There is no font variant assigned to 600, so 600 and 700 together correspond to the same font variant Bold font. Finally, 800 and 900 are allocated to Black and UltraBlack

font variants respectively.

This situation will only occur when the top two thickness levels have been allocated.

Otherwise the user agent may ignore them and assign 800 and 900 to the Bold font, or assign them to one of the two Black font variants. Finally, let's look at the Times font, which has only two font variants, TimesRegulal and TimesBold, as shown below.

Font form: TimesRegular Assigned keywords: normal Assigned numbers: 100,200,300,400,500

## Font form: TimesBold Assigned Keyword: bold Numbers assigned: 600,700,800,900

The assignment of key words normal and bold is quite straightforward. For these numbers, 100 to 300 are assigned to the Regular font, but what about 500? It is assigned to the Regular font because there is no Medium font; so it is the same as 400.

Of the remainder, 700 is always assigned to the bold font, while 800 and 900, due to the lack of bolder fonts, are also assigned to the bold font. Finally, 600 is allocated to the next

bolder font, of course, only the bold font.

Font weight can be inherited. If the paragraph is set to bold, all child elements will inherit bold, as follows:

   p.one {
font-weight:bold; }

The above is the detailed content of A detailed explanation of the font bold attribute font-weight and its working principle in CSS. For more information, please follow other related articles on the PHP Chinese website!