CSSfont-weight标准值与兼容方案

CSS 中 font-weight 并非任意数值都有效，仅 100–900 之间的九个整百数（如 400、600、700）被规范支持且广泛兼容；非标准值（如 350、650）会被向下取整或直接忽略，而能否真正生效更取决于字体文件是否实际提供了对应字重——写对了 CSS 不等于渲染出效果。bolder/lighter 等相对关键字因浏览器实现差异大、嵌套不可控且旧版 IE 支持差，应避免使用；验证是否生效不能只看代码或 DevTools 声明值，而需结合 Network 请求、getComputedStyle 实际返回值及多端真机测试，因为字体粗细最终由字体加载、浏览器映射与系统渲染三层共同决定。

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”，得靠实际加载的字体文件说话。

今天关于《CSSfont-weight标准值与兼容方案》的内容就介绍到这里了，是不是学起来一目了然！想要了解更多关于的内容请关注golang学习网公众号！