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

【问题标题】：Lato with font-weight 300 uses hairline instead of light variant字体粗细为 300 的 Lato 使用细线而不是浅色变体
【发布时间】：2016-01-31 23:36:13
【问题描述】：

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

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

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

使用 Google 的网络字体，thin is used for font-weight 100, light for weight 300。另一方面，当使用本地字体时，细线用于所有

如何在本地使用瘦或轻变体（不使用 Google 网络字体），最好只更改字体粗细？我的字体安装或使用有问题吗？

【问题讨论】：

对不起，你问为什么 Ubuntu 加载了错误的字体？因为这与 CSS、HTML 甚至编程无关，可能是关于“为什么 Ubuntu 没有使用正确的字体”的superuser.com 问题。
我也有类似的问题。所有变体都已安装，我可以在 gnome-font-viewer 中看到“细线”、“细”、“轻”等。但是，在 Inkscape 中，唯一可用的字体是“Light: Thin”和“Light Italic: Hairline Italic”。

标签： css fonts

【解决方案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 字体粗细 映射到真实资源（可以有完全不同的实际字体粗细）使用@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）。

【讨论】：