AMP

添加字体

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

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

  1. 使用 <link> 标记:仅适用于已被列入许可名单的字体提供商。
  2. 使用 @font-face CSS 规则:无限制,所有字体均适用。

在本教程中,我们将使用 <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 新闻报道已经完成!它看起来应该如下所示:

完成后的新闻报道