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

font-weight allowable value Normal | bold | bolder | lighter | l00 | | | | | |

Font-weight Initial value Normal

Font-weight can inherit is

Font-weight applies to all elements

In order to understand how the user agent determines the weight of the font deformation, we have to start with the keywords 100 to 900, and then we'll see how it inherits.

These numeric keywords are used to define a mapping relationship with the font's associated characteristics, that is, the weight of the font is divided into nine levels. For example, an OpenType uses a numeric level of nine values. After the font has this level, these numbers are mapped directly to each level, such as 100 to the lightest font distortion, and 900 for the heaviest font variants.

In fact, there is no such thing as an essential font-weight convention in these numbers. CSS indicates that the font weight of each number must not be less than the corresponding font weight of the number in front of it.

Thus, 100,200,300 and 400 may all correspond to font variants of the same thickness, while 500 and 600 may correspond to a coarser font variant, and 700,800 and 900 correspond to another coarser font variant.

This number is defined as the same as some ordinary, while 700 corresponds to the bold.

The font morph name is equivalent. 400 equivalent ding normal

Other numbers do not correspond to any

The Font-weight properties are keywords, but they can correspond to normal font morph names. If a font warp is marked as "Normal", "Regular", "Roman", or "book", then it is assigned to 400, and any font variants marked "Medium" correspond to 500.

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

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

If the value 500 is not assigned, it is given the same 4,001-like

Font weight.

If 300 is not assigned, it corresponds to a slightly lighter font variant of 400. If no lighter font is available, 300 corresponds to a level of 4,001. This is usually in the case of "Normal" and "Medium". The same method is used for 100 and 200.

If 600 is unassigned, it corresponds to a slightly heavier font variant than 400. If no such font is available, 600 corresponds to a font variant of the same 5,001. This method is also used for 700,800 and 900.

For the sake of understanding, let's take a look at three

Example of font weight allocation, first assume that the font family karrank% is an OpenType font, and that 9 corresponding weight levels have been defined.

Here, the numbers correspond to each level, and the keyword normal and bold are assigned to 400 and 700 respectively. In the second example, we consider the font family Zurich, which is mentioned at the beginning of this content. Assume that its font deformation is also assigned the following weight value.

font form: Zurich light assigned keyword: empty assigned number: 100,200,300

Font form: Zurich Regular assigned keyword: normal assigned number: 400

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

Font form: Zurich bold assigned keyword: bold assigned number: 600,700

Font form: Zurich Black assigned keyword: empty assigned number: 800

Font form: Zurich ultrablack assigned keyword: empty assigned number: 900

The first three digits are assigned to the lightest font. Normal font corresponds to keyword 400 and normal.

The medium font is assigned to the number 500. No font variants are assigned to 600, so 600 and 7,001 correspond to the same font morph bold font. The last 800 and 900 were assigned to black and ultrablack.

Font warp.

This will only happen if the top two weights and 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 take a look at the times, which has only two font variants, Timesregulal and Timesbold, as shown below.

font form: timesregular assigned keyword: normal assigned number: 100,200,300,400,500

Font form: Timesbold assigned keyword: bold assigned number: 600,700,800,900

The distribution of the key Woo normal and bold is fairly straightforward. For these numbers, 100 to 300 is 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 4,001.

For the remainder, 700 is always assigned to the bold font, while 800 and 900 are also assigned to the bold font due to the lack of a thicker font. Finally, 600 is assigned to the next

Thicker fonts, of course, are only bold fonts.

The font weight can be inherited, and if the paragraph is set to bold, all child elements inherit the bold, as follows:

   P.one {font-weight:bold;}