css font weight 不生效怎么办_字体粗细失效原因分析

font-weight 未生效的主因是字体不支持对应字重，需通过 DevTools 检查计算值及字体文件是否存在；其次注意加载顺序、简写语法缺失 font-family、打印 / 移动端兼容性等问题。

font-weight 设置了但没变粗？先看字体支不支持

绝大多数情况下，font-weight: 500 或 font-weight: 600 不生效，不是你写错了，而是当前字体压根没提供这个字重。比如系统自带的 Microsoft YaHei（微软 雅黑）只包含 normal（400）和 bold（700）两个字重——中间的 500、600 全部被 浏览器 自动“降级”到 400 或“升级”到 700。

• 用开发者 工具（DevTools）打开「Computed」面板，看 font-weight 最终计算值是 400 还是 700，再点开旁边的字体名，确认它是否真有对应字重文件
• Google Fonts 等服务默认只加载 wght@400 和 wght@700，要支持 500，得显式加参数，例如：https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700
• 自定义字体必须用 @font-face 分别声明每种字重，且 font-weight 值要严格匹配：

@font-face {font-family: 'MyFont';   src: url('myfont-medium.woff2') format('woff2');   font-weight: 500; /* 必须写 500，不能写 medium */ } @font-face {font-family: 'MyFont';   src: url('myfont-bold.woff2') format('woff2');   font-weight: 700; }

线上正常、本地失效？优先级和加载顺序在捣鬼

常见于用了第三方 UI 库（如 Element Plus、Ant Design）的项目：本地开发时你的 CSS 在框架样式之后引入，所以能覆盖；但构建后打包顺序变了，框架样式反而盖住了你的 font-weight。

• 检查 DevTools 的「Styles」面板，看你的规则是不是被划掉（strikethrough），被哪个选择器干掉了
• 不要依赖 !important 治标，优先改选择器权重，比如把 .title {font-weight: 500;} 改成 body .title {font-weight: 500;}
• H5 页面特别容易中招：大字体包（如 10MB 的 .ttf）异步加载 完成前，浏览器用系统字体临时渲染（此时 font-weight 可能有效），加载完切回自定义字体后，因字重缺失立刻“变细”——这时直接删掉自定义字体，靠系统字体 + 合理 font-weight 反而更稳

打印样式或移动端加粗失败？字体家族必须锁死

打印预览里 font-weight: bold 失效，大概率是因为浏览器在打印时悄悄换掉了你的字体（比如换成 Times New Roman），而该字体根本不支持 bold 渲染。

• 打印媒体查询里必须强制指定一个「已知支持多字重」的无衬线字体：

@media print {.bold-row {     font-family: Arial, 'Helvetica Neue', sans-serif !important;     font-weight: 700 !important;     -webkit-print-color-adjust: exact;     print-color-adjust: exact;} }

• 安卓 WebView 对 font-weight 解析极不稳定，尤其老版本。实测有效的兜底方案：用 text-shadow: 0.1px 0 0 currentColor 模拟加粗感（慎用于正文，仅限小范围强调）
• Chrome / Safari 对 font-weight: 100 等极细字重支持差，MDN 明确说：“对只有 normal/bold 的字体，100–500 全当 400 渲染”——别硬刚，换字体或换设计

font 简写属性里 font-weight 失效？漏写了 font-family

font 是简写属性，语法要求严格：font: [font-style] [font-variant] [font-weight] [font-size]/[line-height] [font-family]。其中 font-size 和 font-family 是必需项，缺一不可。

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

• 下面这行会失效（浏览器忽略整个声明，或 fallback 到默认字体）：

.selector {font: 500 16px;}

• 正确写法必须带字体名：

.selector {font: 500 16px 'Segoe UI', sans-serif;}

• 如果想用系统字体 栈又怕写错，直接拆开写更安全：font-weight: 500; font-size: 16px;

字体粗细不是 CSS 单方面能决定的事——它卡在字体文件、浏览器匹配算法、加载时机、甚至打印引擎之间。最省事的解法，永远是先查 DevTools 里的 Computed Styles，再顺着字体名反向验证资源是否存在。别猜，直接看浏览器到底用了哪个文件、哪个字重。