Question

想要使用Lato灯..以下没有工作：

body {
    font-family: "lato"; 
    background-color: white;
    font-weight: 300; 
}

可能出现什么问题？

Answer 1

为了能够使用特定的font-weight，您首先必须加载它。

实用解决方案：

将您的<link>代码导入 Lato 替换为：

<link href="https://fonts.googleapis.com/css?family=Lato:300,400,700" rel="stylesheet">

请注意family:Lato:300,400,700部分。更改它以适应项目的font-weight需求。如果您使用拉丁语扩展子集，您还需要将其添加到其中，方法是将链接更改为

<link href="https://fonts.googleapis.com/css?family=Lato:300,400,700&subset=latin-ext" rel="stylesheet">

您可以深入挖掘并提供服务器中的字体文件，但总体而言，不建议在页面速度方面。

Answer 2

这不是很多信息，但我会这样说。要更改您需要包含的任何字体的字体粗细，以包含每个字体粗细的不同字体文件。例如，如果您正在拉入＆＃34; lato＆＃34;使用此链接从谷歌字体

<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">

然后只会拉入默认字体粗细（400）。为了包含不同的字体粗细（例如300），您需要将其添加到链接中，如下所示

<link href="https://fonts.googleapis.com/css?family=Lato:300,400" rel="stylesheet">

现在请注意，它会提取300和400的字体文件。

如果您使用的是自己的字体文件，而不是谷歌字体，那么您需要自己包含300的字体样式表。

Answer 3

这里的示例包括除斜体变体之外的所有权重：

body {
  font-family: 'Lato', sans-serif;
}
.light {
  font-weight: 300;
}
.regular {
  font-weight: 400;
}
.bold {
  font-weight: 700;
}
.black {
  font-weight: 900;
}

<link href="https://fonts.googleapis.com/css?family=Lato:300,400,700,900" rel="stylesheet">
<p class="light">weight 300</p>
<p class="regular">weight 400</p>
<p class="bold">weight 700</p>
<p class="black">weight 900</p>

想要使用lato light - 字体重量不变

3 个答案:

实用解决方案：