font-weight 实际有效值仅 normal、bold、lighter、bolder 及 100–900 中的整百数（如 400/500/600/700），但生效取决于字体是否真实提供对应字重，最稳妥是用 400 和 700；非标准值如 550 会被就近取整并常降级为 400。
font-weight 能设哪些值，哪些真正有用
直接说结论：font-weight 不是“越数字越大就越粗”，浏览器只认有限几个关键字和部分数字值，瞎填 650 或 888 基本等于白写。
主流浏览器（Chrome/Firefox/Safari）实际支持的只有：normal、bold、lighter、bolder，以及 100–900 中的某些档位——但不是每个档位都有对应字体文件。比如多数网页默认用 system-ui 或 Helvetica，它们通常只提供 400（normal）和 700（bold）两档。
-
font-weight: 400≈normal，700≈bold，这两档最稳，必生效 -
300、500、600是否生效，取决于你加载的字体是否真包含这些字重；查@font-face定义里的font-weight值确认 -
lighter/bolder是相对计算，依赖父元素值，容易失控，线上慎用 - 别写
font-weight: 550—— 没有字体支持它，浏览器会就近取整到500或600，但大概率 fallback 到400
用 CSS 变量统一控制字体粗细更靠谱
硬编码 font-weight: 600 在多个地方，后期想调细一点就得全局搜改。用 CSS 变量能一次改到处，也方便做主题切换。
比如定义一套语义化层级：
立即学习“前端免费学习笔记（深入）”；
body {
--fw-regular: 400;
--fw-medium: 500;
--fw-semibold: 600;
--fw-bold: 700;
}
然后在组件里用：
.btn { font-weight: var(--fw-semibold); }
h2 { font-weight: var(--fw-bold); }
- 变量名带
fw-前缀，一眼看出是 font-weight，避免和--color-text这类混淆 - 值仍选
400/500/600/700这种标准档位，不写523这类非标数 - 如果用了自定义字体（如 Inter、SF Pro），务必检查其
@font-face是否真声明了对应font-weight，否则变量再漂亮也没用
font-weight 失效？先看字体本身支不支持
这是最多人卡住的地方：CSS 写对了，但文字就是不加粗，十有八九是字体没这个字重。
打开浏览器开发者工具，选中文字元素，在 Styles 面板看 font-family 实际加载的是哪个字体，再点开 Fonts 标签页——这里会列出当前文本真正用到的字体文件及其 weight 值。
- 如果显示
weight: 400，但你写了font-weight: 600，说明浏览器找不到 600 字重，自动降级了 - 用 Google Fonts 时，别只加
&family=Roboto，要显式指定字重：&family=Roboto:wght@400;500;700 - 本地字体用
@font-face加载时，每个字重必须单独声明一个@font-face块，并配对正确的font-weight值
内联 style 和 !important 不解决根本问题
有人试过写 style="font-weight: 800 !important"，发现还是不粗——这不是优先级问题，是字体压根没 800 这一档。
强行用 !important 只会让调试更难，掩盖真实瓶颈。
- 优先检查 computed styles 里的 actual font weight，而不是看 rules 面板里哪条被划掉了
- 内联样式无法绕过字体缺失问题，它只是把无效声明“写得更用力”而已
- 真正要改的，是字体资源本身，或换一个带所需字重的字体
字体粗细这事，表面是 CSS 属性，底层是字体文件能力。参数填得再准，没对应字重文件，就只是纸上谈兵。
