Css font-weight principle, cssfont-weight
Why record it? Because today I want to set a bold character, and then use font-weight: 200, no effect. Now it seems ridiculous that 400 is equivalent to normal, and 200 is not refined. So we need to study the working principle of font-weight.
I. IntroductionFont-weight is used to set the text width. The text width setting is a complicated font style definition. The reason for this is that the font width is changing and there is no uniform standard, the specific font width is also different.
Property value:Normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 |Inherited Value
Default Value: normal.
There are three ways to set the font-weight attribute value:
First: keyword method:
There are two keywords: normal [default value, standard character defined] and bold [bold character defined ].
Method 2: relative thickness value:
The relative width is also defined by the keyword. There are two bolder, bolder, and lighter, which define finer characters ], however, its width is relative to the inherited value of the parent element. Bolder is the coarse font available for the next level in the matching font set, and vice versa. It matches the fine font of the next level. Their references are inherited values, so the width is relative to the inherited value.
For details, refer:
Third: a sequence of nine numbers from "100" to "900.
These numbers represent the font width from the smallest (100) to the largest (900.
The value 400 is equivalent to normal,
A value of 700 is equivalent to bold.
Ii. ExampleCode: Times New Roman Effect
<Html>The correspondence between MDN and W3C is as follows:
100Thin (Hairline ),200Extra Light (Ultra Light ),300Light,400Normal,500Medium,600Semi Bold (Demi Bold ),700Bold,800Extra Bold (Ultra Bold ),900Black (Heavy)
If a given font family contains less than nine font thicknesses, the user agent needs to do more. In this case, a predefined method is used to fill in the missing gaps.
Fill in the missing methods:
See font-weight.
500 missing: Same as 400.
600 | 700 | 800 | 900 any value is missing: the value is the same as the crude value of the next level. If not, the value is the same as that of the lower level.
For example, if "500" and "900" are missing in a font ", the font's 9-Level Width value should be equivalent to "100, 200, 300, 400, 400, 600, 700, 800 ".
300 | 200 | any value in 100 is missing: it is the same as the lower-level smaller value. If not, the value is the same as that of the rough value at the next level.
In an image, gray indicates that there is no such value, so adjacent values are used.
The weight Value of the font is 400,700 and 900.
The weight Value of the font is 300 and 600.
Generally, the designer does not define a thickness of more than three levels in an article, and the width of the design should jump. Otherwise, the bold content cannot be highlighted.
4. Resource linksBaidu encyclopedia font-weight
Http://baike.baidu.com/item/font-weight
W3c font-weight
Http://dev.w3.org/csswg/css-fonts-3/#font-weight-prop
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
