添加字体

在 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 验证器的输出。此外部样式表请求不应有错误。

Web 字体可能会对网站的性能产生不利影响，即使是在速度很快的 AMP 站点上也是如此。使用 font-display CSS 属性来优化字体的加载行为。

您已完成您的 AMP 新闻文章！以下是它应该的样子

已完成的新闻文章