css 字体粗细与浏览器兼容性怎么办_font-weight 规范值

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 的兼容性陷阱

这两个关键字看似灵活，实则极难预测。它们不是绝对值，而是相对于父元素的相对调整，且各浏览器实现差异大：

GitHub Copilot

GitHub AI编程工具，实时编程建议

下载

• 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 在桌面和移动端可能表现不一致