使用@font-face 规则答案

【问题标题】：Working with @font-face rule使用@font-face 规则
【发布时间】：2020-07-02 00:42:10
【问题描述】：

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">

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

提前感谢您的帮助。

【问题讨论】：

首先，尝试在页面顶部添加字体选项。其次，如果您使用谷歌字体，您可以轻松地@include 它们（参见：css-tricks.com/snippets/css/using-font-face/…）

标签： html css google-fonts

【解决方案1】：

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

在 CSS 中指定

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

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

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

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

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

【讨论】：

【解决方案2】：

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

【讨论】：