font-weight: 600有时无效，主因是字体文件未提供该字重，浏览器会降级至400或700；需通过DevTools验证实际加载的字体及计算值，并确保@font-face或Google Fonts链接中显式声明对应字重。
直接结论：用 100–900 的整百数值（如 600、700、800），别用 bolder 或 lighter，且必须确认字体文件本身包含对应字重。
为什么 font-weight: 600 有时没反应
不是 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很可能被忽略
如何确保 font-weight: 800 真的生效
关键不在 CSS，而在字体加载环节。你设了 800，但没告诉浏览器“我有这个字重的文件”，它就只能瞎猜。
- 用
@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 均支持）
font-weight 在伪类（如 :hover）里不变化的原因
表面是 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可增强感知强度
真正难的不是写对 font-weight，而是让整个链路——CSS 声明、字体加载、浏览器匹配、设备渲染——全部对齐。一个 600 要生效，至少得过三关：你写了、字体提供了、浏览器选中了。
