Are all CSS font-weight property's values useful?

font-weight:normal开发者_JAVA百科
font-weight:bold
font-weight:bolder
font-weight:lighter
font-weight:100
font-weight:200
font-weight:300
font-weight:400
font-weight:500
font-weight:600
font-weight:700
font-weight:800
font-weight:900

I've only used font-weight:bold and sometimes font-weight:normal to override bold so far. What are the usages of the others?

I created this example page with all the values for the property, but there's not much difference in many of them.

http://jsbin.com/omaha3

If the font you are displaying has more weights like semi-bold, light, etc. the browser may be able to render those weights if you use one of the numeric values. Most end-user fonts come with two or three styles only, though, so I don't think this is much applicable to the real world. I would rely on normal (=400 I think) and bold (=700) only.

There's good additional info in the W3C reference on font-weight: bold as well.

Update: Here is an in-depth blog post on how the styles are rendered in modern browsers. It is titled "Font-weight is still broken in all but one browser" :)
2nd Update: As clagnut.com suffered a catastrophic dataloss here is the archived post

It depends on the browser/OS too. Firefox on the Mac tends to support more graduations (5 different weights for Myarid pro) and Firefox 3 on Windows will sometimes display a light font. The other browsers on Windoows or Mac only display two weights - bold or normal.

When I want cross-browser control of font-weight, I set my text color to a grey - say #777 and then my bold colors can be #444 and #000 and my lighter colors can be #aaa and #ddd. It doesn't change the thickness like font-weight does but it still gives the visual impact.

edited to add the IE6 craziness with font-weight

font-weight:600 in a print stylesheet causes IE6 to print out bold and italic but print preview shows only bold.

Depends on requirement, and can be useful when you are creating proportional font sizing for stylish textual looks.