为什么CSS中设置font-weight:bold在某些字体下无效？-css教程-PHP中文网

font-weight: bold在微软雅黑、苹方中常失效，是因为这些系统字体实际只提供400和700两档字重，而bold等价于700；若字体文件缺失700档位，浏览器会降级回400，导致“不加粗”假象。

为什么css中设置font-weight:bold在某些字体下无效？

不是 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，它只会查表匹配。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

正确做法是为每个字重单独声明，且 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;
}