font-weight: bold在微软雅黑、苹方中常失效，是因为这些系统字体实际只提供400和700两档字重，而bold等价于700；若字体文件缺失700档位，浏览器会降级回400，导致“不加粗”假象。
不是 CSS 写错了，是字体文件压根没提供 bold 对应的字重（即 700），浏览器只能 fallback 到最接近的可用值——通常是 400，看起来就像“没加粗”。
font-weight: bold 为什么在微软雅黑、苹方里常失效
系统中文字体普遍字重精简：Microsoft YaHei 只有 400 和 700 两档；-apple-system（苹方）虽支持更多轴（如 wght 可变轴），但默认加载时只带 400 和 600，bold 被解析为 700 后无对应数据，直接降级回 400。
验证方式：打开 DevTools → Computed → 展开 font-weight，看最终计算值是 400 还是 700；再点旁边字体名，确认该字体是否真有 700 字重文件。
- 不要依赖“名字叫 bold 就一定粗”，
bold是关键字，等价于700，它不触发合成，只做匹配 - 中文字体如
Noto Sans CJK SC、Source Han Sans多数只提供300/400/700，600或800基本无效 - 用 Google Fonts 时，必须显式声明所需字重，例如：
https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;700
@font-face 声明 font-weight 不匹配导致失效
自定义字体若只声明一个 @font-face 规则却想靠它撑起所有 font-weight 值，大概率失败。浏览器不会从一个 400 文件里“推导出”700，它只会查表匹配。
立即学习“前端免费学习笔记（深入）”；
正确做法是为每个字重单独声明，且 font-weight 值必须与实际文件语义一致：
@font-face {
font-family: 'MyFont';
src: url('myfont-regular.woff2') format('woff2');
font-weight: 400;
}
@font-face {
font-family: 'MyFont';
src: url('myfont-bold.woff2') format('woff2');
font-weight: 700;
}
-
font-weight: medium或font-weight: 500写在规则里，但文件其实是 regular，会导致匹配失败 - 本地调试时路径错误、CORS 阻止加载、或
src指向了不存在的文件，都会让整条@font-face失效 - 检查 Network 面板，确认
.woff2请求返回200，且响应头含content-type: font/woff2
被更高优先级规则覆盖或继承干扰
即使字体支持 700，也常因层叠问题“赢不了”。比如 UI 框架组件内部用 .el-button span 这类高特异性选择器设了 font-weight: 400 !important，你的 .title { font-weight: bold; } 就完全无效。
- DevTools 的 Styles 面板里，被划掉（strikethrough）的
font-weight就是被覆盖的证据 - 父元素设了
font: 14px/1.4 "Arial"这种简写，会清空子元素继承的font-weight，除非子元素显式重写 - 避免全局滥用
!important，优先提升选择器权重，例如把.btn改成button.btn或.app .btn
加粗后文字发虚？那是浏览器在“造假”
当字体真没 700，而你又强设 font-weight: 700，Chrome / Edge 可能启用 synthetic bold（模拟加粗）：横向拉伸笔画、加描边。结果就是边缘模糊、小字号锯齿、中文顿挫感消失。
- 这种模糊不是 CSS 错，是渲染层 fallback 行为，无法通过
text-shadow或paint-order修复 - Windows + Chrome 下尤其明显，macOS 因 subpixel 渲染关闭，有时反而不明显
- 真正解法只有两个：换一个原生支持
700的字体，或接受400并靠字号、颜色、间距提升视觉重量
最常被忽略的一点：你写的 font-weight: bold 在开发环境看着正常，上线后可能因构建工具抽离 CSS 顺序、CDN 缓存旧字体文件、或用户系统禁用了可变字体，瞬间退回 400 —— 所以别只信本地预览，务必在真实设备+网络条件下用 Computed 面板逐项验证。
