The basic use

Values: normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | | 800 | 900 700

Normative interpretation

The W3C specification – fonts

Core point combing:

  • “Font-weight” does not tell the browser how high the font weight should be to “draw” text, but how it should continue to “match” the font in a set of fonts matched by “font-family”.
  • Typically, a particular font will contain only a small number of available word weights (the actual effect also depends on the font package itself). If no direct match exists for the specified word weight, the adjacent available word weight is used through font matching algorithm rule matching.
  • Bolder and lighter indicate that the word weight value is calculated based on the word weight inherited from its parent element, and has no relation with the word weight represented by Normal and bold.

Word rematch rules

If the specified font-weight value, the desired word weight, can be found in the font, then the corresponding word weight is matched. Otherwise, use the following rules to find the desired word weight and render:

  1. If the required weight is less than 400, the weights below the required weight are checked in descending order, then the weights above the required weight are checked in ascending order until a match is found.
  2. If the desired weight is greater than 500, the weights above the desired weight are checked in ascending order, and then the weights below the desired weight are checked in descending order until a match is found.
  3. If the desired weight is 400, check 500 first, and then use a rule that requires less than 400.
  4. If the desired weight is 500, check 400 first, and then use a rule that requires less than 400.

Official website example bolder, lighter

conclusion

  • Than usingnormal/boldIt also allows for uniform font weights — 400 and 700 have normal and bold equivalents, and all other values must be written as numbers. And Chinese sites rarely use font-weight values other than normal and bold, so there’s really no need to write numbers.
  • Because font-weight values other than normal and bold are used when the font package does not support word-matching, this can be a deviation from the desired effect