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

在前端开发中,字体的粗细属性用 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 @   王铁柱6  阅读(76)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 25岁的心里话
· 闲置电脑爆改个人服务器(超详细) #公网映射 #Vmware虚拟网络编辑器
· 基于 Docker 搭建 FRP 内网穿透开源项目(很简单哒)
· 零经验选手,Compose 一天开发一款小游戏!
· 一起来玩mcp_server_sqlite,让AI帮你做增删改查!!
点击右上角即可分享
微信分享提示