为什么@font-face无法加载ttf格式下的所有字重？

问题根本原因 #

@font-face规则中的font-weight描述符仅支持100~900的固定整数值，不支持lighter、bolder这类相对字重关键字。相对关键字是用于普通元素样式声明、基于父元素字重计算最终值的，放在@font-face里属于无效取值。

你在第一条@font-face中写font-weight: lighter时，浏览器会忽略这个无效值，自动将该规则的字重默认匹配为normal（对应数值400），导致两条@font-face规则都是font-family: "Open Sans" + font-weight: normal的相同匹配条件，CSS规则后声明优先级更高，所以只会生效最后一条。

修复方案 #

将两个@font-face的font-weight替换为对应字重的标准数值即可：

@font-face {
  font-family: "Open Sans";
  src: url("Open_Sans/OpenSans-Light.ttf") format("truetype");
  font-weight: 300; /* Open Sans 细体对应标准字重值300 */
}

@font-face {
  font-family: "Open Sans";
  src: url("Open_Sans/OpenSans-Regular.ttf") format("truetype");
  font-weight: 400; /* 常规字重对应标准值400，等价于之前的normal */
}

之后给需要应用细体的h1标签设置font-weight: 300，浏览器就会自动匹配加载细体字体文件。

补充说明 #

你之前开发其他网站没有遇到该问题，大概率是之前的@font-face规则中font-weight使用的是标准数值，而非相对关键字。

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