为什么@font-face 无法以 ttf 格式加载所有字体粗细？

Question

我有一个在 github https://anupamkhosla.github.io/omcarreer/ 上运行的着陆页演示在 css 我有以下代码：

@font-face {
  font-family: "Open Sans";
  src: url("Open_Sans/OpenSans-Light.ttf") format("truetype");
  font-weight: lighter;  
}

@font-face {
  font-family: "Open Sans";
  src: url("Open_Sans/OpenSans-Regular.ttf") format("truetype");
  font-weight: normal;  
}

字体 Open Sans 下载自 Google https://fonts.google.com/specimen/Open+Sans 文件下载为 ttf truetype.

h1 标签说 “我们是招聘界最值得信赖的品牌。” 应该采用更轻的字体，但实际情况是浏览器似乎忽略了第一个 font-face 声明，因此不加载字体的较轻版本。如果我交换字体声明的位置，那么最后提到的位置似乎又得到了尊重。您可以在 css 文件中看到字体声明 https://anupamkhosla.github.io/omcarreer/css/main.css 如果您在 inspect element 中打开 Networks 选项卡，您将只看到后面提到的字体被加载。

为什么 font-face 被这样覆盖？我曾经用类似的字体声明制作其他网站，但从未遇到过这个问题。

Answer 1

值“lighter”可用于应用于内容元素的 font-weight 属性，这意味着比继承的值更轻。（参见 CSS Fonts Module Level 3, §3.2。

但在 @font-face 规则中，“打火机”不是有效值。（参见 CSS Fonts Module Level 3, §4.4。这没有意义：比什么轻？

在@font-face规则中，你应该使用font-weight: 300。

为什么@font-face 无法以 ttf 格式加载所有字体粗细？

Why is @font-face not able load all font weights in ttf format?

html

css

fonts

same-origin-policy

font-face