html - 字体粗细不起作用

Question

我在使用较轻的字体粗细时遇到了问题。我有我想在我的电脑上使用的所有字重的字体，但它不起作用。我发现很多字体无法使用较轻的字重。这是怎么回事？

https://jsfiddle.net/ywr2ks1p/

p{
  font-family: museo sans;
  font-weight: 100;
  font-size: 50px;
}

<div>
  <p>
  hello I am some text
  </p>
</div>

Answer 1

如果我输入 600 或更多，它就会像预期的那样变成粗体。也许如果我要安装字体的轻量级版本，那么较小的字体就可以了。取而代之的是，浏览器只是默认为普通或粗体。

From Mozilla CSS Reference :

If the exact weight given is unavailable, then the following heuristic is used to determine the weight actually rendered:

• If a weight greater than 500 is given, the closest available darker weight is used (or, if there is none, the closest available lighter weight).
• If a weight less than 400 is given, the closest available lighter weight is used (or, if there is none, the closest available darker weight).
• If a weight of exactly 400 is given, then 500 is used. If 500 is not available, then the heuristic for font weights less than 400 is used.
• If a weight of exactly 500 is given, then 400 is used. If 400 is not available, then the heuristic for font weights less than 400 is used.

This means that for fonts that provide only normal and bold, 100-500 are normal, and 600-900 are bold.

编辑:看起来它确实支持更轻的重量