如何在CSS中精确控制font-weight字体粗细层级-css教程-PHP中文网

font-weight: 600有时无效，主因是字体文件未提供该字重，浏览器会降级至400或700；需通过devtools验证实际加载的字体及计算值，并确保@font-face或google fonts链接中显式声明对应字重。

如何在css中精确控制font-weight字体粗细层级

直接结论：用 100–900 的整百数值（如 600、700、800），别用 bolder 或 lighter，且必须确认字体文件本身包含对应字重。

不是 CSS 写错了，而是字体没提供 600 这一档字重。浏览器不会“生成”粗细，只会从已加载的字体文件中选最接近的可用值——常见 fallback 是退到 400 或 700，导致视觉上毫无变化。

检查当前页面实际渲染的字重：打开 DevTools → Elements → Computed → 找 font-weight，看右侧显示的**最终计算值**（比如显示 400 就说明降级了）
点开同一面板里的 font-family，确认当前生效的是哪个字体文件（如 Inter-600.woff2 还是 Inter-400.woff2）
系统字体（如 macOS 的 San Francisco、Windows 的 Segoe UI）通常只提供 300、400、600、700 四档，500 和 800 很可能被忽略

关键不在 CSS，而在字体加载环节。你设了 800，但没告诉浏览器“我有这个字重的文件”，它就只能瞎猜。

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

用 @font-face 显式声明每一档字重，例如：

@font-face {
  font-family: 'Inter';
  font-weight: 800;
  src: url('Inter-800.woff2') format('woff2');
}

Google Fonts 引入时要手动指定字重参数，比如：https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800 —— 缺了 ;800，font-weight: 800 就无效
可变字体（Variable Font）是更优解：单个文件支持连续字重（wght 轴），此时 font-weight: 623 也能生效，但需确认浏览器支持（Chrome/Firefox/Safari ≥14.1 均支持）

表面是 hover 没加粗，实际大概率是样式被覆盖，或字体压根不支持该字重。

优先检查 DevTools 中 :hover 规则下的 font-weight 是否被划掉（表示被更高优先级规则覆盖）
避免全局写 body { font-weight: 400 !important }，它会直接封死所有子元素的加粗尝试
如果用了 CSS 变量，确保变量值是纯数字，例如 --fw-emphasis: 700 ✅，而 --fw-emphasis: bold ❌（关键字在变量中无法参与计算）
某些字体（如早期版本的 Roboto）在 700 下渲染偏弱，视觉上像没变；换用 800 或搭配 text-shadow: 0 0 1px currentColor 可增强感知强度