CSS变量控制字体粗细，实现多状态样式切换

CSS中font-weight在:hover等伪类下失效，往往并非代码错误，而是受样式优先级覆盖、字体本身字重支持不足或浏览器fallback机制影响；本文深入剖析根本原因，强调通过开发者工具诊断覆盖状态、采用更具体选择器、确保字体包含所需字重，并重点推荐以无单位CSS变量（如--fw-semibold）统一管理字体粗细——既提升可维护性与主题适配能力，又规避关键字映射模糊和硬编码弊端；同时提醒注意font-weight数值过渡的局限性及动态修改可能引发的渲染性能问题，助你精准、高效、稳定地控制文字视觉层级。

font-weight在:hover等伪类里不生效？检查是否被更高优先级样式覆盖

很多情况下写好 :hover { font-weight: 700; } 却没变化，不是语法错，而是别的规则把它压住了。比如全局设置了 body { font-weight: 400 !important; }，或者组件库的 class 优先级更高。

• 用浏览器开发者工具点中元素，看 font-weight 是否被划掉（表示被覆盖）
• 避免滥用 !important，优先用更具体的 selector，比如 .btn:hover 而不是单纯 :hover
• 注意字体本身是否支持对应字重——有些 Web 字体只提供了 400 和 700 两个档，设 font-weight: 600 就会回退到最近可用值（通常是 400 或 700）

用CSS变量统一管理font-weight值，避免硬编码

把字重抽象成变量后，换主题、适配暗色模式、做A/B测试都方便得多，改一处就全局生效。

• 定义变量推荐放在 :root 里：

  :root {<br>  --fw-normal: 400;<br>  --fw-semibold: 600;<br>  --fw-bold: 700;<br>}

• 使用时直接绑定：font-weight: var(--fw-semibold);
• 变量名别用 --font-weight-bold 这种冗余命名，--fw-bold 足够，缩写是行业惯例，也减少拼写错误
• 不要在变量里写单位（var(--fw-bold) 不是 var(--fw-bold) * 1），font-weight 的值本来就是无单位数字

font-weight数值 vs 关键字：为什么建议优先用数字

虽然 bold、normal 看起来简洁，但它们实际映射关系模糊，不同浏览器或字体下可能不一致。

• font-weight: bold 等价于 font-weight: 700，但前提是字体有 700 字重；否则可能 fallback 到 600 甚至 400
• 用数字能明确控制层级，比如按钮默认 400，悬停 600，点击态 700，语义清晰且可预测
• CSS 中 font-weight 支持 100–900 的整百数，但不是所有值都会触发真实变化——多数字体只实现 400/500/600/700 四档，中间值只是“尝试”，不可依赖

动态切换字体粗细时要注意 reflow 和渲染抖动

频繁修改 font-weight（比如配合 scroll 或 mousemove）可能触发重排，尤其在旧版 Safari 或低端安卓机上明显卡顿。

• 如果只是视觉强调，考虑用 transform: scale(1.02) + opacity 配合硬件加速，比改字重更轻量
• 真要动态切，优先用 CSS 变量 + transition，而不是 JS 直接改内联样式：

  a {<br>  font-weight: var(--fw-normal);<br>  transition: font-weight 0.2s ease;<br>}<br>a:hover {<br>  --fw-normal: 600;<br>}

• 注意：font-weight 本身不支持平滑过渡（浏览器会阶梯式跳变），所以过渡效果其实是“开关式”的，别对动画精度抱太高期望

字体粗细看似简单，但牵扯到字体加载、CSS 层叠、渲染管线多个环节。最常被忽略的是：你写的 font-weight: 600，最终显示出来是不是真的 600——得看字体文件里有没有这一档，以及浏览器有没有悄悄 fallback。

到这里，我们也就讲完了《CSS变量控制字体粗细，实现多状态样式切换》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于的知识点！