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