Question

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

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

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

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

Answer 1

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

PS：你的字体网址有点错字。

的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;
}

Answer 2

您需要使用css中的font-weight属性以及字体权重的正确数字表示。

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

300,400,600,900对应字体权重。

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

在您的情况下，font-weight: 300会很轻，font-weight: 900会变黑。

如何使用不同类型的Google字体类型？

2 个答案: