字体的粗细的属性是用哪一个?它有哪些属性值?
在前端开发中,字体的粗细属性用 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
范围,以确保设计效果的实现。
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 25岁的心里话
· 闲置电脑爆改个人服务器(超详细) #公网映射 #Vmware虚拟网络编辑器
· 基于 Docker 搭建 FRP 内网穿透开源项目(很简单哒)
· 零经验选手,Compose 一天开发一款小游戏!
· 一起来玩mcp_server_sqlite,让AI帮你做增删改查!!