css 字体加粗不生效怎么办_font-weight 与选择器优先级

font-weight未生效的四大原因：被更高优先级规则覆盖、选择器特异性不足、字体本身不支持指定字重、内联样式或js动态修改覆盖。应通过devtools的computed和styles面板定位真实生效值。

font-weight 值写对了但没加粗，先查是否被覆盖

很多情况下 font-weight 看似写了 bold 或 700 却不生效，根本原因不是语法错，而是 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 更快定位问题。