如何使用不同种类的谷歌字体类型？答案

【问题标题】：How to use different kind of Google Font types?如何使用不同种类的谷歌字体类型？
【发布时间】：2017-03-06 14:48:49
【问题描述】：

我想使用不同类型（浅色、黑色、半粗体）的 Google 字体。

这是 Google 字体的链接：https://fonts.googleapis.com/css?family=Exo+2:300,400,600,900

常规工作正常，font-family: 'Exo 2'; 但我想知道如何使用 Light，Black 的。我已经尝试过 Exo 2 Black/Light，但这似乎不起作用。

我也阅读了文档，但也没有答案。

【问题讨论】：

没有浅黑字体。你所能做的就是设置字体粗细

标签： css fonts

【解决方案1】：

您首先必须在文档头部加载字体，然后在 CSS 中将该字体与正确的 font-weight 结合使用。

PS：你的字体 URL 有一点错别字。

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Website</title>
  <link href="https://fonts.googleapis.com/css?family=Exo+2:300,400,600,900" rel="stylesheet">
  <link href="path/to/styles.css" rel="stylesheet">
</head>
<body>
  …
</body>
</html>

styles.css

.light {
  font-family: 'Exo 2';
  font-weight: 300;
}

.normal {
  font-family: 'Exo 2';
  font-weight: 400;
}

.semi-bold {
  font-family: 'Exo 2';
  font-weight: 600;
}

.black {
  font-family: 'Exo 2';
  font-weight: 900;
}

【讨论】：

【解决方案2】：

您需要在 css 中使用 font-weight 属性和正确的字体粗细数字表示。

在您的情况下，您可以在 URL 中看到可用的不同权重： https://fonts.googleapis.com/css?family=Exo+2:300,400,600,900

300,400,600,900 对应字体粗细。

300 - 光
400 - 常规（因此无需声明）
600 - 粗体
900 - 黑色

在你的情况下，font-weight: 300 是浅色的，font-weight: 900 是黑色的。

【讨论】：