使用font-weight 300的Lato使用发际线而不是轻型变体

Question

我在我的本地机器上安装了Lato字体(来自http://www.latofonts.com).它包含几种重量变体,如发丝,细线和浅色.

当我创建HTML页面并使用CSS选择Lato字体,并将font-weight设置为300时,使用了hairline变体.

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

使用Google的网络字体,thin用于font-weight 100,轻量级用于300.另一方面,当使用本地字体时,发际线用于所有权重<400,并且无法选择薄或轻的变体.

如何在本地使用薄或轻型变体(没有Google网络字体),最好只更改字体重量？我的字体安装或用法有什么问题吗？

Answer 1

CSS权重在字体领域不是正式的,真实的东西,它们只是CSS使用的惯例,并且对作为字体系列的一部分的字体指示的权重没有影响.这些值是usWeightClass在OS/2OpenType字体的表,可以是0到65355之间的任意数字,与数字被完全基于什么设计师/代工意味着他们有.

所以,看看Lato字体,我们看到以下权重:

• 常规:OS/2.usWeightClass = 400
• Light: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);
}

现在你的CSS,当使用字体系列"Lato"时,将使用基于CSS font-weight属性的正确资源(根据你).

html, body {
  font-family: Lato;
}

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

p {
  font-weight: 400;
}

...

(2019编辑:更改了font-face以使用woff2,因为这是你现在应该使用的唯一格式).