CSS font-weight numbers: how do they work?

Question

I'm trying to use font-weight to adjust how bold the font is. From what I understand, value 500 is the normal font weight, and value 700 is the default font weight for bold.

However, when I put 599, it did not change the font-weight at all. But when I put 600, it jump to the default font weight of bold. Same results from value 600-900. Then when you go over 900, the font weight reverts back to the normal font weight. Why is this happening?

#fontStyle {
    border: 1px solid black;
    font-weight: 599;
}

<div id="fontStyle"> fontStyle </div>

Answer 1

The details of how numeric values are mapped to font weights are covered in the spec which states:

The values '100' to '900' form an ordered sequence, where each number indicates a weight that is at least as dark as its predecessor. The keyword 'normal' is synonymous with '400', and 'bold' is synonymous with '700'. Keywords other than 'normal' and 'bold' have been shown to be often confused with font names and a numerical scale was therefore chosen for the 9-value list.

'599' is not a valid value for the font-weight property

Answer 2

Default font weight is 400, and fonts work in multiples of 100. 300 is light (if your font supports it), 400 is regular, 600 is semibold and 700 is bold. You can't use the numbers in between.