font-weight支持100–900整百数值及normal、bold等关键字，400等价normal、700等价bold；其余值是否生效取决于字体文件是否包含对应字重，浏览器仅保证实现400和700。
font-weight 支持哪些数值，哪些是关键字
font-weight 接收两类值：无单位数字（100–900）和关键字（如 normal、bold）。数字必须是 100 的整数倍，400 等价于 normal，700 等价于 bold。浏览器只保证实现 400 和 700，其余数值是否生效，完全取决于字体文件本身是否包含对应字重——比如你设 font-weight: 600，但字体没提供“Semibold”字形，那它可能回退到 400 或直接模拟加粗（效果发虚）。
常见误区是以为设个 500 就一定比 400 明显更粗。实际中，多数系统字体（如 macOS 的 San Francisco、Windows 的 Segoe UI）只内置 300、400、600、700 四档，中间值常被忽略。
为什么 font-weight: 600 没反应，或看起来和 400 一样
本质是字体缺失对应字重，浏览器无法“无中生有”。尤其在用自定义 Web Font 时，容易漏掉加载特定字重的文件。
- 检查字体加载是否包含
font-weight: 600对应的@font-face声明（比如font-weight: 600要配一个单独的woff2文件） - 用浏览器开发者工具的“Computed”面板看最终生效的
font-weight值，再点开字体名，确认当前文本实际渲染的是哪个字重文件 - 避免对非设计为多字重的字体强行指定中间值，例如用
font-family: "Helvetica"时设font-weight: 500，基本无效
font-weight 数值与 CSS 变量、继承的关系
数值型 font-weight 支持继承，且可被 CSS 变量承接，但要注意变量值必须是合法数字或关键字：
body {
--base-weight: 500;
}
h1 {
font-weight: var(--base-weight); /* ✅ 合法 */
}
p {
font-weight: calc(var(--base-weight) + 100); /* ✅ 得到 600 */
}
但以下写法会失效：
-
font-weight: var(--base-weight, bold)—— fallback 关键字不能混在数值上下文中 -
font-weight: 500px—— 带单位直接被忽略 - 父元素设
font-weight: bolder，子元素继承后继续用bolder，实际效果取决于字体族的相对层级，不可控
font-weight 在不同浏览器中的兼容性差异
现代浏览器都支持 100–900 数值，但老版本 Safari（≤12）对 font-weight: 100 到 300 的支持不稳定，有时强制映射到 400；IE11 完全不支持 100、200、300，只认 400–900。
如果项目需兼容旧 Safari 或 IE，建议：
- 优先使用
400/600/700这类广泛支持的值 - 避免依赖
100实现“极细体”，改用字体厂商提供的专用细体家族（如"Inter Thin"） - 用
@supports (font-weight: 100)做特性检测，给新旧环境分层设置
字体字重不是纯 CSS 控制的开关，它是字体文件、浏览器解析、渲染引擎三者共同作用的结果。最稳妥的做法，永远是先确认字体本身提供了哪些字重，再决定怎么设 font-weight。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
