font-weight合法数值仅有100、200、300、400、500、600、700、800、900九个整百数；非标准值如350会被向下取整或忽略，且生效依赖字体文件是否提供对应字重。
font-weight 的合法数值有哪些
浏览器只认 font-weight 的规范值，不是所有数字都有效。CSS 规范定义了 9 个命名值（normal、bold）和对应的数字值（100–900，步长为 100）。但关键点是：**只有 100、200、300、400、500、600、700、800、900 这九个整百数被广泛支持**；像 350 或 650 这类非标准值，多数浏览器会向下取整到最近的合法值（例如 350 → 300），Chrome 甚至直接忽略并回退到继承值。
为什么 font-weight: 500 在某些字体上不生效
根本原因不是 CSS 写错了，而是字体文件本身没提供对应字重。比如系统默认的 "Helvetica Neue" 或网页常用的 "Inter"，如果只加载了 400 和 700 两个字重，那写 font-weight: 500 就等于白写——浏览器找不到匹配的字体数据，只能模拟（synthesis），而现代浏览器普遍禁用粗体/细体模拟以保质量。
- 用
@font-face加载字体时，必须显式声明font-weight范围，例如：@font-face { font-family: "MyFont"; src: url("myfont-500.woff2") format("woff2"); font-weight: 500; font-style: normal; } - 检查实际加载的字体：打开 DevTools → Elements → Computed →
font-family和font-weight，看右侧“Actual value”是否显示真实匹配的字重 - 避免依赖字体合成：不要指望
font-weight: 600能让400字体自动变粗，它大概率只是加粗渲染（效果差且不可控）
font-weight: bolder / lighter 的兼容性陷阱
这两个关键字看似灵活，实则极难预测。它们不是绝对值，而是相对于父元素的相对调整，且各浏览器实现差异大：
-
bolder在父元素是400时，Chrome 可能升到700，Firefox 却可能只到500 - 嵌套多层后，
bolder可能反复“升重”，最终超出字体实际支持范围，退回到normal - 几乎所有旧版 IE（≤IE11）对
bolder/lighter支持不稳定，建议彻底弃用 - 替代方案：统一用数字值（如
600、700），并在 CSS 中明确定义层级关系
如何验证 font-weight 是否真正生效
不能只看 DevTools 里写的值，得确认它是否触发了正确的字体文件加载和渲染行为：
立即学习“前端免费学习笔记（深入）”；
- 在 Network 面板过滤
woff2或woff，看对应字重的字体文件是否被请求 - 用
window.getComputedStyle(el).fontWeight检查运行时计算值——返回可能是字符串"500"，也可能是"normal"（等价于400）或"bold"（等价于700） - 在 macOS 上特别注意：Safari 对
font-weight: 900的处理有时会降级为800，尤其搭配font-feature-settings: "tnum"时 - 真机测试不可少：iOS Safari 和 Android Chrome 对字重映射策略不同，同一段 CSS 在桌面和移动端可能表现不一致
字体粗细这件事，表面是写个数字，背后连着字体加载、浏览器映射、操作系统渲染三层逻辑。最常被忽略的是：你写的 600，未必等于设计师给的“Semibold”，得靠实际加载的字体文件说话。