CSS Font-weight -unseen differences?

Question

I made this simple demo .

I can see in Visual studio , all the values which font-weight can have :

However when I tried all those values, I could locate only 4 distincts.

I added those red rectangles so you can see who has the same width.

why those all in the middle ( and those last) looks the same ? why do I need all those numbers?

Answer 1

Different fonts have different font weights available to them. Your browser is not attempting to simulate the missing weights (which is a good thing, that is hard to get right), so you are limited to the weights that exist in the installed version of the font you are using.

Answer 2

This can be either because the font doesn't support so many different weights or the browser can't display those weights.

Regardless, the numbers have to be there because that's how font weights work. If a font does support different weights then it is up to the browser to display it as accurately as it can; otherwise it tries to fall back gracefully to the nearest that's supported.