使用@font-face 规则

Question

div h2 {
  text-align: center;
  color: white;
  padding: 0px 20px 0px 20px;
  font-family: 'Exo 2';
  font-style: normal;
  font-weight: 400;
}
@font-face {
  font-family: 'Exo 2';
  font-style: normal;
  font-weight: 300;
  src: local('Exo 2 Light'), local('Exo2-Light'), url(https://fonts.gstatic.com/s/exo2/v4/TZlHHgxEfHXA7uKM1eaCjXYhjbSpvc47ee6xR_80Hnw.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}
@font-face {
  font-family: 'Exo 2';
  font-style: normal;
  font-weight: 400;
  src: local('Exo 2'), local('Exo2-Regular'), url(https://fonts.gstatic.com/s/exo2/v4/mJrGVjHbrdshrbGyvd7vdaCWcynf_cDxXwCLxiixG1c.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}

我正在尝试使用谷歌字体我也在我的 html 文件中将它链接如下：

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

不幸的是，在我添加了字体样式后，文本没有显示出来。 我的做法有问题吗？

提前感谢您的帮助。

Answer 1

如谷歌字体网站所述，当您包含链接标签时，您必须指定字体

在 CSS 中指定

使用以下 CSS 规则来指定这些系列：

font-family: 'Exo 2', sans-serif;

有关如何将字体添加到网页的示例，请参阅入门指南。

所以在你的css中你只需要添加：

.someSelector {
   font-family: 'Exo 2', sans-serif;
 }

Answer 2

可能你的浏览器不支持 woff2 字体