Css 字体重量为300的Lato使用发际线而不是轻型变体

我已经在本地机器上安装了Lato字体（从）。它包含几种重量变体，如发际线、薄和轻

当我创建一个HTML页面并使用CSS选择Lato字体，并将字体权重设置为300时，就会使用hairline变量

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

使用谷歌的网页字体。另一方面，当使用本地字体时，发际线用于所有小于400的权重，并且无法选择薄或轻的变体

如何在本地使用瘦或轻的变体（没有Google web字体），最好只更改字体的重量？我的字体安装或使用中有什么错误吗？

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中设置字体权重时做“正确的事情”，则必须使用@font-face规则将这些CSS字体权重映射到实际资源（可能具有完全不同的实际字体权重）：

/* 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);
}

现在，当您使用字体系列“Lato”时，您的CSS将根据CSS字体权重属性使用正确的资源（根据您）

html, body {
  font-family: Lato;
}

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

p {
  font-weight: 400;
}

...

---

（2019编辑：将字体改为使用woff2，因为这是错误的）。

对不起，你是在问为什么Ubuntu加载了错误的字体？因为这与CSS、HTML甚至编程无关，可能是关于“为什么Ubuntu没有使用正确的字体”的问题。我也遇到了类似的问题。所有变体都已安装，我可以在gnome字体查看器中看到“发际线”、“薄”、“轻”等。但是，在Inkscape中，唯一可用的字体是“浅：薄”和“浅斜体：发际斜体”。