Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How is text thickness calculated according to css property "font-weight"?

Tags:

html

css

fonts

Font weight in Firefox:

font-weight in firefox

Font weight in Chrome:

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?

like image 935
ThemeZ Avatar asked Mar 09 '12 07:03

ThemeZ


People also ask

What is CSS font weight property?

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.

What is the CSS property to make the weight of the text thicker or thinner Its values are 100 to 900 bolder bolder and lighter?

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.

Which property is used to specify the thickness of the font?

The font-size CSS property sets the size of the font.

How do you add thickness to text in CSS?

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.


1 Answers

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.

like image 124
yas Avatar answered Nov 11 '22 13:11

yas