想使用 lato light - 字体粗细不变答案

【问题标题】：want to use lato light - font weight not changing想使用 lato light - 字体粗细不变
【发布时间】：2017-01-16 04:31:23
【问题描述】：

想用拉托灯..以下没用：

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

可能出了什么问题？

【问题讨论】：

你能不能发一个完整的代码，因为这根本没用？
您是否加载了浅色字体？你可以发布你的 html 来配合这个吗？

标签： css fonts

【解决方案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 需求。如果您使用 Latin Extended 子集，您还需要添加它，方法是将链接更改为

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

您可以深入挖掘并从您的服务器提供字体文件，但总体而言，就页面速度而言，不建议这样做。

【讨论】：

【解决方案2】：

这不是很多信息，但我会这么说。要更改任何字体的字体粗细，您需要包括为每个字体粗细包含不同的字体文件。例如，如果您使用此链接从谷歌字体中提取“lato”

<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 的字体文件。

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

【讨论】：

【解决方案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>

【讨论】：