Detailed explanation of usage examples of font-weight attribute in css

To understand how the user agent determines the thickness of the font deformation, we must first talk about keywords 100 to 900, and then we will look at how it is inherited.

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

These numeric keywords are used to define and The mapping relationship of 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 some 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.

For ease of 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 weight levels have been defined.

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 keywords: normal Assigned numbers: 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 Number assigned: 800

Font style: Zurich UltraBlack Keyword assigned: empty Number assigned: 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 keywords: bold Assigned numbers: 600,700,800,900

Key words The assignment of normal and bold is fairly 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 bold font.

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

p.one {
  font-weight:bold; }

The above is the detailed content of Detailed explanation of usage examples of font-weight attribute in css. For more information, please follow other related articles on the PHP Chinese website!