font-weight

font | font-family | font-style | font-variant | font-weight

font-weight

設定字體的粗細，可設為：

1. normal：等於 400，此為預設值。
2. bold：粗體字，等於 700。
3. bolder：粗些，以父元素的字為準。
4. lighter：細些，以父元素的字為準。
5. 100 到 900 的數字，由細到粗。
6. 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>

數字粗細。 <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>

: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>

• 不同瀏覽器的輸出格式有不同。
• Safari, Chrome 沒輸出 fontFamily, fontStyle, fontVariant, fontWeight；IE6, Firefox 全有。