添加字体

在 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 新闻文章！这是它的外观

完成的新闻文章