CSS 字體粗細 font-weight屬性

在CSS中，經過 font-weight屬性 用來設置字體的粗細值，取值爲 lighter | normal | bold | bolder，默認爲 normal。lighter 爲細體，normal 爲正常粗細，bold 爲粗體，bolder 爲特粗體。如：

1. .lighter {
2. font-weight: lighter;
3. }
4. .normal {
5. font-weight: normal;
6. }
7. .bold {
8. font-weight: bold;
9. }
10. .bolder {
11. font-weight: bolder;
12. }

1. <p class="lighter">字體粗細： lighter</p>
2. <p class="normal">字體粗細： normal</p>
3. <p class="bold">字體粗細： bold</p>
4. <p class="bolder">字體粗細： bolder</p>

上述代碼定義了 4 種不一樣粗細的字體，按順序依次變粗。運行結果如圖 3‑3 所示：

圖3-3 font-weight屬性效果

爲了實現更細緻的控制，CSS也容許使用數字來設置字體的粗細。數字必須是100的整數倍，取值在100~900 之間，值越大字體越粗。400 等同於 normal，700 等同於 bold。不一樣取值的結果如圖 3‑4 所示：

圖3-4 font-weight屬性值對照表

瀏覽器會自動爲一些元素（如，strong、h1～h6 和b）添加粗體格式，有些元素還繼承了父元素粗體格式，能夠經過 font-weight: normal 來取消這些元素的粗體格式。

關於做者

歪脖先生，十五年以上軟件開發經驗，酷愛Web開發，精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等，著有《HTML寶典》、《揭祕CSS》、《Less簡明教程》、《JSON教程》、《Bootstrap2用戶指南》、《Bootstrap3實用教程》，並所有在 GitHub 上開源。