設定字體的粗細，可設為：
- normal：等於 400，此為預設值。
- bold：粗體字，等於 700。
- bolder：粗些，以父元素的字為準。
- lighter：細些，以父元素的字為準。
- 100 到 900 的數字，由細到粗。
- inherit：繼承父元素特徵。
- 風格用法：
<style type='text/css'>
SPAN[style~='font-weight:'] {font-size:24px}
SPAN[style~='font-weight:']:after {content:' / '; color:red}
</style>
<span style='font-weight: lighter' >lighter</span>
<span style='font-weight: normal' >normal</span>
<span style='font-weight: bold' >bold</span>
<span style='font-weight: bolder' >bolder</span> - 執行結果： lighter normal bold bolder
數字粗細。
- 風格用法：
<span style='font-weight: 100' >100</span>
<span style='font-weight: 300' >300</span>
<span style='font-weight: 500' >500</span>
<span style='font-weight: 700' >700</span>
<span style='font-weight: 900' >900</span> - 執行結果：100 300 500 700 900
:HOVER, :ACTIVE 的應用。使用時要注意，在 IE6 中 :HOVER, :ACTIVE 只能用在 ANCHOR 元素。
- 風格用法：
<style type='text/css'>
.hvr {width:200px;
height:150px;
border:solid 1px red;
font-weight:100;
}
.hvr:hover {font-style:italic;}
.hvr:active {font-weight:900;}
</style>
<div class=hvr>
射擊遊戲, 好玩遊戲, 搏擊遊戲, 賽車遊戲, 小遊戲.
</div> - 執行結果：
射擊遊戲, 好玩遊戲, 搏擊遊戲, 賽車遊戲, 小遊戲.
javascript 應用。可以用 style 物件 的特徵 font, fontFamily, fontStyle, fontVariant, fontWeight 讀取或設定特徵值。
- 風格用法：
<div id='atr3' style='font: small-caps italic bold 24px /120% serif; background:red; width:300px; height:150px'>
射擊遊戲, 益智遊戲, 好玩遊戲, 搏擊遊戲, 賽車遊戲, 小遊戲, 冒險遊戲.
</div>
<script type='text/javascript'>
var os=document.getElementById('atr3').style;
document.write( os.font
+'<br />'+ os.fontFamily
+'<br />'+ os.fontStyle
+'<br />'+ os.fontVariant
+'<br />'+ os.fontWeight );
</script> - 執行結果：射擊遊戲, 益智遊戲, 好玩遊戲, 搏擊遊戲, 賽車遊戲, 小遊戲, 冒險遊戲.italic small-caps bold 24px / 120% serif
serif
italic
small-caps
bold
- 不同瀏覽器的輸出格式有不同。
- Safari, Chrome 沒輸出 fontFamily, fontStyle, fontVariant, fontWeight；IE6, Firefox 全有。
