font-weight:normal
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 sometime font-weight:normal to override bold so far? What are usages of others?
I created this example page with all properties but noy much difference in many of them
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" :)
Depends on requirement, and can be useful when you are creating proportional font sizing for stylish textual looks.
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.