CSS中字体加粗无效？检查_font-weight和选择器优先级匹配问题？

本文共计944个文字，预计阅读时间需要4分钟。

在许多情况下，使用 `font-weight` 或 `bold` 或 `700` 来加粗文本可能不会生效。这并非语法错误，而是因为 CSS 层叠规则中的优先级问题。基本原因是这些属性在 CSS 中有更高级别的规则覆盖了它们。

浏览器开发者工具中，查看该元素的 `Computed` 面板，展开 `font-weight` 属性，点击右侧箭头可以看到所有相关属性的声明。带有删除线的属性表示已被覆盖。

• 检查是否有父元素设置了 font-weight: normal 且子元素没显式重写（继承值会生效）
• 确认没用 !important 的其他规则在后面强行设回 400
• 注意某些 UI 框架（如 Ant Design、Element Plus）会在组件内部用高特异性选择器重置字体粗细

选择器优先级不够导致 font-weight 被忽略

比如你写了 .btn { font-weight: 700; }，但框架样式用了 button.btn-primary 这类组合选择器，它的优先级就高于单类名，你的规则自然失效。

• 用浏览器 DevTools 的 Styles 面板看哪条规则“赢了”，右键“Force element state”可临时验证是否真被压住
• 提升自己规则的优先级：改用 button.btn、.btn.btn-strong，或加一层 body .btn
• 避免滥用 !important；真要用，也只加在 font-weight 上，别整条规则都上

font-weight 数值无效：字体本身不支持该字重

CSS 中 font-weight: 900 写得再狠，如果当前字体文件（比如系统自带的 PingFang SC、Segoe UI）压根没提供 900 字重，浏览器就会 fallback 到最接近的可用字重（通常是 400 或 700），看起来就是“不加粗”。

• 用 @font-face 引入字体时，务必检查 font-weight 声明是否和实际文件匹配，例如：

  @font-face { font-family: 'MyFont'; src: url('myfont-bold.woff2') format('woff2'); font-weight: 700; }

• 查看字体支持的字重范围：Mac 上用“字体册”App，Windows 用“字体预览”，或直接查字体官网文档
• Web 字体加载失败时，后备字体（font-family: 'MyFont', sans-serif;）可能不支持你要的字重，此时会退回到 sans-serif 的默认行为

内联样式或 JS 动态设置覆盖了 CSS 规则

有些组件库或业务代码会在 JS 里直接操作 element.style.fontWeight = 'normal'，这种内联样式优先级高于外部 CSS，除非你用 !important 或更高优先级选择器去对抗。

立即学习“前端免费学习笔记（深入）”；

• 在 DevTools 的 Elements 面板里看元素上是否有 style="font-weight: ..." 属性
• 检查 JS 是否调用了 element.classList.remove() 把加粗类删了，或者用了 element.style.fontWeight = '' 清空但没触发重绘
• React/Vue 组件中，注意 style 对象绑定是否覆盖了 class 中的 font-weight

字体加粗失效真正难缠的地方，往往不在 font-weight 本身，而在于你没意识到它正被继承、被覆盖、被字体文件限制、或者被 JS 暗中改写。盯着 Computed 面板里的真实值，比反复改 CSS 更快定位问题。