字体的粗细的属性是用哪一个?它有哪些属性值?

在前端开发中,字体的粗细属性用 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; /* 相对于父元素加粗 */
}

需要注意的是,并非所有字体都支持所有粗细级别。有些字体可能只有 normalbold 两种选择。 在选择字体时,需要考虑其支持的 font-weight 范围,以确保设计效果的实现。

posted @ 2024-12-02 09:30  王铁柱6  阅读(165)  评论(0)    收藏  举报