Font weight in Firefox:
Font weight in Chrome:
The font-weight
value is in the order of 100,500,600,700,900, which is set according to the W3C standard.
You can clearly see that the text thickness is not changed linearly, and in different browser not exactly the same (it's almost the same from 100 to 500.). So I wonder, is there a standard on how the text is calculated according to font-weight
?
The font-weight CSS property sets the weight (or boldness) of the font. The weights available depend on the font-family that is currently set.
How to Make Text Bold with the CSS font-weight Property. The font-weight property takes lighter , bold , and bolder as values. It also takes numbers from 100 to 900.
The font-size CSS property sets the size of the font.
The font-weight property in CSS is used to set the weight or thickness of the font. It specifies how thin or thick the characters in a text. The font-weight property is either dependent on the weights specified by the browser or the available font faces in a font family.
The algorithm, at least in theory, is: http://www.w3.org/TR/CSS2/fonts.html#propdef-font-weight
The CSS3 specification is similar - http://www.w3.org/TR/css3-fonts/#font-weight-prop
As it states, bold faces are often synthesized by user agents for faces that lack actual bold faces.
I've found its often better to avoid font-weights all together, and use a specific font face.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With