font-weight 应优先使用数字值（100–900）并确保字体文件实际支持该字重，避免依赖“bolder”“lighter”等相对关键字或未提供的字重（如650、900），否则浏览器会静默降级或模拟加粗导致模糊；需结合@font-face声明、Google Fonts参数及document.fonts.check()验证。
font-weight 值写成字符串会失效
很多新手把 font-weight 设成 "bold" 或 "normal" 以外的字符串（比如 "bolder"、"lighter"），结果没反应——不是 CSS 不生效，是浏览器对这些关键字的支持依赖字体本身是否提供对应字重。
-
"bold"和"normal"是最稳妥的，几乎所有字体都支持 -
"bolder"/"lighter"是相对当前父元素计算的，嵌套深了容易失控 - 数字值（
100–900）才是真·可控方式，但前提是字体文件里真有这个字重（比如 Roboto 有 300/400/500/700，但不支持650） - 用
@font-face引入自定义字体时，务必检查font-weight声明是否和实际文件匹配，否则浏览器会静默降级到400
加粗后文字发虚或模糊
这是字体渲染层面的问题，尤其在 Windows + Chrome 下常见。根本原因不是 CSS 写错了，而是浏览器对非整数字重（如 600）或未安装对应字重的字体做了模拟加粗（fake bold），强行拉伸笔画导致边缘失真。
- 优先用字体厂商提供的原生字重（比如 Google Fonts 页面上明确标出的
600链接） - 避免在
font-weight: 600的基础上再叠一层text-shadow: 0 0 1px black来“假装加粗”，这会让模糊更明显 - 如果必须兼容老字体，可加
-webkit-font-smoothing: antialiased（仅限 WebKit），但别滥用，它会影响整个文本块的清晰度
font-weight 在不同浏览器默认值不一致
Chrome 和 Safari 对某些字体（尤其是系统 UI 字体如 -apple-system）默认启用更细的字重（font-weight: 400），而 Firefox 可能按传统逻辑走 500，导致同一段 CSS 在不同浏览器里粗细不一。
- 显式声明
font-weight: 400或500能消除歧义，别依赖浏览器默认 - 用
font-weight: inherit要小心：如果父元素是600，子元素继承后可能意外变粗，尤其在组件库嵌套场景下 - 检查 DevTools 的 Computed 面板里
font-weight实际解析值，有时显示normal但背后是400，有时显示bold却是700，数值比文字更可靠
使用 font-weight: 900 却没变粗
不是代码写错，是字体压根没提供 900 字重。浏览器不会报错，只会悄悄 fallback 到最近可用的字重（比如 700 或 800），你完全感知不到。
立即学习“前端免费学习笔记（深入）”；
- 查字体文档或用
font-display: swap配合font-weight测试加载行为 - 在 Google Fonts URL 里手动加上
&display=swap&family=Roboto:wght@400;700;900才算真正请求了900版本 - 用
@supports (font-weight: 900)做特性检测意义不大，因为支持语法 ≠ 支持该字重，得靠 JS 检测document.fonts.check('900 16px "Roboto"')
字体字重这事，表面是 CSS 属性，底层是字体文件、浏览器渲染策略、操作系统字体栈三者咬合的结果。改一个 font-weight 值之前，先确认那个数字在你用的字体里真实存在。
