Question

我在本地计算机上安装了Lato字体（来自http://www.latofonts.com）。它包含几种重量变体，如发丝，薄和光。

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

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

使用Google的网络字体thin is used for font-weight 100, light for weight 300。另一方面，当使用本地字体时，发际线用于所有权重＆lt; 400，并且无法选择薄或轻的变体。

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

Answer 1

CSS权重不在字体中是正式的，真实的东西，它们只是一种只使用CSS的约定，并且对字体作为字体的一部分指示的权重没有影响家庭。这些值是OpenType字体usWeightClass表中的OS/2，可以是0到65355之间的任意数字，数字纯粹基于设计师/代工厂所具有的数字。

所以，看看Lato字体，我们看到以下权重：

常规：OS / 2.usWeightClass = 400
Light：OS / 2.usWeightClass = 300
瘦：OS / 2.usWeightClass = 275
发际线：OS / 2.usWeightClass = 250

如果你想让CSS做正确的事情＆＃34;当您在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，当使用字体系列＆＃34; Lato＆＃34;时，将根据CSS font-weight属性使用正确的资源（根据你）。

html, body {
  font-family: Lato;
}

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

p {
  font-weight: 400;
}

...

（ 2019编辑：更改了font-face以使用woff2，因为那是the only format you should use by now）。

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

1 个答案: