字型的粗細的屬性是用哪一個？它有哪些屬性值？

王铁柱6發表於2024-12-02

在前端開發中，字型的粗細屬性用 font-weight 表示。它可以接受以下屬性值：

  • 關鍵字:

    • normal (預設值，相當於 400)
    • bold (相當於 700)
    • bolder (相對於父元素的字型加粗一個級別)
    • lighter (相對於父元素的字型減輕一個級別)

  • 數值: 100, 200, 300, 400, 500, 600, 700, 800, 900。其中 400 為正常粗細，700 為粗體。100 最細，900 最粗。

一些字型可能只支援部分數值，例如只有 400 和 700 兩種選擇。 如果設定了一個字型不支援的數值，瀏覽器會嘗試選擇最接近的可用值。

例如：

.thin {
  font-weight: 100; /* 最細 */
}

.normal {
  font-weight: normal; /* 正常 */
}

.bold {
  font-weight: bold; /* 粗體 */
}

.extra-bold {
  font-weight: 900; /* 最粗 */
}

.relative-bold {
  font-weight: bolder; /* 相對於父元素加粗 */
}

需要注意的是，並非所有字型都支援所有粗細級別。有些字型可能只有 normal 和 bold 兩種選擇。 在選擇字型時，需要考慮其支援的 font-weight 範圍，以確保設計效果的實現。

相關文章