添加字体

在 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 站点上，Web 字体也可能不利于网站的性能。使用 font-display CSS 属性来优化字体的加载行为。

您已完成您的 AMP 新闻文章！它应该看起来像这样

完成的新闻文章