@font-face字体权重遭用户代理覆盖，如何让H1保持默认权重？

问题原因 #

H1标签的浏览器默认样式（用户代理样式）自带font-weight: bold（对应数值权重700），而你只声明了该自定义字体400权重的版本。浏览器找不到匹配700权重的字体文件时，要么会替换成系统字体，要么会自动模拟加粗效果，导致自定义字体的样式被覆盖。

解决方案 #

方案1：直接重置H1的字体权重

最直接的方式是给H1标签设置明确的字体权重，覆盖浏览器默认样式：

/* 确保H1使用自定义字体，并重置权重为400 */
h1 {
  font-family: 'XXX', sans-serif;
  font-weight: 400;
}

方案2：为bold权重映射自定义字体文件

如果希望项目中所有使用该字体的bold样式（不止H1）都用400权重的字体文件，而非浏览器模拟加粗，可以扩展@font-face规则，将700权重（对应bold）指向同一个字体文件：

@font-face {
  font-family: 'XXX';
  font-weight: 400;
  font-style: normal;
  src: url('你的S3存储桶字体文件路径') format('woff2'); /* 补充字体文件路径，推荐用woff2格式 */
}

/* 映射bold权重到同一个字体文件 */
@font-face {
  font-family: 'XXX';
  font-weight: 700;
  font-style: normal;
  src: url('你的S3存储桶字体文件路径') format('woff2');
}

设置后，任何使用font-weight: bold或font-weight:700且字体为XXX的元素，都会加载你定义的400权重字体，不会触发浏览器的默认替代行为。

注意点 #

• 你的原始@font-face规则缺少src属性，必须添加该属性指定S3上的字体文件路径，否则浏览器无法加载自定义字体。
• 优先使用woff2格式的字体，它压缩率更高，加载速度更快。

内容的提问来源于stack exchange，提问作者Diego Leitão