如何修复多字体fallback权重问题？CSS字体权重配置故障求助

嘿，我来帮你搞定这个让人头疼的字体 fallback 小问题！你想要的效果是：H1优先用BreeSerif（400常规），如果这个字体加载失败，就切换到Arial（700粗体），再失败就用系统无衬线字体（400常规），但之前的尝试最后一步总是变成粗体，对吧？

先说说你之前尝试的问题 #

你写的代码里有几个关键漏洞：

• 多处@font-face语法错误（大括号没闭合、引号缺失），导致浏览器无法正确解析规则
• 错误地给H1设置了统一的font-weight:700，导致最后一个sans-serif也继承了粗体权重
• 自定义字体族的权重映射逻辑不对，没有精准控制每个fallback字体的字重

正确的解决方案 #

核心思路是：通过自定义@font-face规则，为每个fallback字体创建权重映射，让H1在切换字体时自动应用我们想要的字重，而不是用统一的权重值。

下面是完整的可运行代码：

/* 1. 定义BreeSerif常规字重 */
@font-face {
  font-family: 'BreeSerif';
  src: url('fonts/BreeSerif-Regular.otf') format('opentype');
  font-weight: 400;
}

/* 2. 自定义Arial粗体的fallback族：让这个族的400权重对应Arial的粗体 */
@font-face {
  font-family: 'ArialBoldFallback';
  src: local('Arial Bold'), local('Arial-BoldMT'); /* 兼容不同系统的Arial粗体命名 */
  font-weight: 400;
}

/* 3. 设置H1的字体链 */
h1 {
  font-family: BreeSerif, ArialBoldFallback, sans-serif;
  font-weight: 400; /* 统一用400，通过上面的@font-face映射到不同字体的对应权重 */
}

/* 你原来的其他样式可以保留 */
body { 
  width: auto; 
  background: #eee; 
  font-family: arial, sans-serif; 
}
p { 
  font-family: helvetica; 
  font-size: 14px; 
  color: #222; 
}
#ContentWrapper { 
  background: white; 
  width: 960px; 
  margin: auto; 
}

为什么这样能行？ #

• 当BreeSerif可用时，H1的font-weight:400会匹配我们定义的BreeSerif常规字重，显示正常粗细
• 当BreeSerif不可用时，轮到ArialBoldFallback，这个族的font-weight:400被映射到本地的Arial粗体，所以显示粗体
• 最后轮到sans-serif时，浏览器会用它默认的400常规字重，完美符合你的预期

内容的提问来源于stack exchange，提问作者Swiking