CSS font-weight 文字粗細效果

CSS font-weight 屬性可以輕易的修改網頁文字粗細效果，經常套用於整個網頁、DIV 區塊、span 區域或 TABLE 表格內，font-weight 屬性有好幾種不同的文字粗細可以設定，也完全取代傳統的 HTML 粗體字效果，不過一般都只用到粗體字或一般字體而已。

CSS font-weight 屬性語法
font-weight: 參數值;
這裡整理一些常見的設定參數。
參數語法效果
normalfont-weight:normal;
font-weight:normal;
bold
font-weight:bold;font-weight:bold;
bolder
font-weight:bolder;font-weight:bolder;
lighter
font-weight:lighter;font-weight:lighter;
數字font-weight:200;font-weight:200;
以上的效果各位可以自己比較看看，不是每個效果都很明顯，根據不同的瀏覽器、作業系統、電腦內建字型 ... 等因素都會影響最終顯示的效果，通常比較明顯的差異僅在粗體與一般字體的不同，也就是 normal 與 bold，不過 normal 是預設值，其實可以不用寫，最後一個參數值＂數字＂的範圍在 100~900 之間，不需要單位。

CSS font-weight 文字粗細效果範例、用 span 標示一段要變粗的字
範例的實際效果
這是一般的文字這段文字會變粗體字這是一般的文字
這是一個簡單的基礎應用範例，我們透過 span 標籤把一段文字標示起來，然後透過 CSS 的 font-weight 屬性將該段文字調整為粗體，你可以從範例的實際效果看到結果。

更多網頁文字設計
分享於 2016-02-16