10.添加字体

如前所述，AMP文档中不允许使用外部样式表请求。但是，这个规则有一个例外：字体。

字体是网页用户文章阅读体验的重要组成部分，因为Web浏览器通过外部样式表提取字体文件请求，在AMP中排除是必要的。

让我们尝试添加对Raleway字体的引用到文档：

<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Raleway">

现在更新您的CSS以包括对Raleway的引用：

body {
  width: auto;
  margin: 0;
  padding: 0;
  font-family: 'Raleway', sans-serif;
}

刷新你的页面，看看你的页面的新外观。还要检查验证器的输出，你会注意到，这个外部请求没有任何抱怨。

注意：在文档中包含一个字体不需要任何其他组件。话虽如此，实际上有一个名为amp-font的组件。它实际上并不用于加载Web字体，而是可以使用它来检测Web字体是否已成功加载，并在必要时进行适当的响应。

您可以使用此功能来隐藏您的文本，直到您的字体完全加载，因此用户不会看到文本从其临时字体变化到其真实字体。在字体然后失败的情况下，您可能希望仅显示临时字体。毕竟，最坏的情况是如果用户没有看到任何文本！在这里阅读更多关于amp-font的信息。