添加字体

在 AMP 网页中，为尽可能缩短文档的加载用时，您不能添加外部样式表。但是，这条规则有一个例外，即字体。

您可以通过以下两种方式将自定义字体嵌入到 AMP 网页中：

在本教程中，我们将使用 <link> 标记向网页中添加字体。首先，向 <head> 中添加一个样式表链接，以请求 Raleway 字体：

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

现在，更新您的 CSS body 选择器，以添加对 Raleway 的引用：

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

刷新网页后，您即会看到焕然一新的网页外观。此外，请检查 AMP 验证工具的输出结果。此外部样式表请求不应有任何错误。

网络字体可能影响网站的性能，即使在非常快的 AMP 网站上也可能如此。请使用 font-display CSS 属性优化字体的加载行为。

至此，您的 AMP 新闻报道已经完成！它看起来应该如下所示：

完成后的新闻报道