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

Answer 1

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

Answer 2

font-weight sets the intended weight of the font you wish the browser to render. Usually different weights of the same font are actually separate fonts (consider Arial versus Arial Black), and the browser might even substitute a different font family for the bolder variety. The browser is also not required to have all fonts at all weights available, so some font-family/font-weight combinations might not have any effect.

Browsers and CSS are not a typesetting system. You're not guaranteed to get your requested styles rendered exactly as you specified them. If you want more control over your fonts, consider using @font-face declarations.

Answer 3

Basically, if the font with the specified font-weight does not exists, it will be replaced by the closest font-weight available. That's why you do not see any changes.

Note that 400 is normal and 700 is bold, and that most web fonts do not have more font-weights then that. So 95% percent of the time, you can stick with "bold" and "normal" to specify font-weight in css.

Answer 4

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.