How it works css font-weight values?

Question

I don't understand font-weight values. When I change it as bold , normal or 600+, also changing fonts. But change it as 100 to 500, doesn't change anything. Why have these values?

Answer 1

The font-weight values, from 100 to 900, reflect typographic practices of designing different-weight typefaces of a font. Very few fonts have all those weights, but the scale has been selected to cover, more or less, the different weights used. The CSS3 Fonts draft describes a correspondence between the numbers and traditional typographic terms such as Thin, Extra Light, etc., but terminology really varies.

In typography, each weight is a separate typeface designed by typographer. This is one reason why most fonts have just two, or maybe just one, weight: it takes time to design a typeface, and time is money. Another reason especially applicable to fonts as used on the web is that display devices have been rather coarse, making fine typography often a rather pointless attempt. In particular, small font heights don’t work well on low-resolution devices.

The CSS specifications define an algorithm for mapping declared font weights to available weights. For example, when only weights 400 and 700 are available (the usual situation), then weights 100, 200, and 300 are mapped to 400.

However, in some cases browsers algorithmically bold glyphs. This is more of a problem than a solution, and due to browser differences, it may cause odd things if you ask for a nonexistent weight. Most browsers seem to use algorithmic bolding if a weight of 600 or more is requested for and the font only has normal (400) typeface. For example, setting font-weight: bold when text is in Arial Unicode MS (which has no bold typeface) creates an artificially bolded version of Arial Unicode MS.

There are additional problems with commonly available fonts. Sometimes you need to use a typeface name as if it were a font name, e.g. font-family: Arial Black instead of the logical setting font-family: Arial; font-weight: 900. Sometimes this does not work, since on some browsers only the logical way works.

As a rule, don’t try to use other weights than normal and bold unless you use downloadable fonts (web fonts) via @font-face, which gives you control over the font weight issue. Most fonts that can be used as downloadable contain just the two basic weights, or just one, but there are interesting free fonts with several weights.

Answer 2

font-weight value changes the weight of font.

Normally all browser only.

font-weight:bold;

work properly.

100-500 font-weight not bold the font because its percentage of bolding the font is less than 50%.

and browser automatically change it into normal font not bold