css - 字体粗细为 300 的 Lato 使用细线而不是浅色变体

Question

我已经在我的本地机器上安装了 Lato 字体(来自 http://www.latofonts.com)。它包含多种重量变体，例如细线、细和轻。

当我创建一个 HTML 页面并使用 CSS 选择 Lato 字体，并将 font-weight 设置为 300 时，使用的是 hairline 变体。

body {
    font-family: "Lato", sans-serif;
    font-weight: 300;
}

使用谷歌的网络字体，thin is used for font-weight 100, light for weight 300 .另一方面，当使用本地字体时，所有字重 < 400 都使用细线，并且无法选择细或轻的变体。

如何在本地使用细或轻变体(没有 Google 网络字体)，最好只更改字体粗细？是我安装的字体有问题，还是使用有问题？

Answer 1

CSS 权重不是字体领域中正式的、真实的东西，它们只是只有 CSS 使用的约定，并且对作为字体系列一部分的字体指示的权重没有影响。这些值是 OpenType 字体的 OS/2 表中的 usWeightClass，可以是 0 到 65355 之间的任何数字，数字完全基于设计者/类型转换厂意味着他们拥有。

因此，查看 Lato 字体，我们看到以下权重:

• 常规:OS/2.usWeightClass = 400
• 轻:OS/2.usWeightClass = 300
• 瘦:OS/2.usWeightClass = 275
• 细线:OS/2.usWeightClass = 250

如果您希望在 CSS 中设置字体粗细时 CSS 做“正确的事情”，您必须将那些 CSS 字体粗细 映射到一个真实的资源(它可以有一个完全不同的 < em>实际字体粗细) 使用@font-face 规则:

/* Four different rules, for CSS weights 100, 200, 300, 400, same font name */

@font-face {
  font-family: Lato;
  font-weight: 100;
  src: local("Lato Hairline"),
       url("...latohairline.woff2") format(WOFF2);
}

@font-face {
  font-family: Lato;
  font-weight: 200;
  src: local("Lato Thin"),
       url("...latothin.woff2") format(WOFF2);
}

@font-face {
  font-family: Lato;
  font-weight: 300;
  src: local("Lato Light"),
       url("...latolight.woff2") format(WOFF2);
}

@font-face {
  font-family: Lato;
  font-weight: 400;
  src: local("Lato Regular"),
       url("...latoregular.woff2") format(WOFF2);
}

现在您的 CSS 在使用“Lato”字体系列时，将根据 CSS font-weight 属性使用正确的资源(根据您的要求)。

html, body {
  font-family: Lato;
}

h1 {
  font-size: 150%;
  font-weight: 200;
}

p {
  font-weight: 400;
}

...

(2019 年编辑:将字体更改为使用 woff2，因为那是 the only format you should use by now)。