tag: for allow-listed font providers only. 2. By using ...">tag: for allow-listed font providers only. 2. By using ...">添加字体 - amp.dev - AMP 框架
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 新闻文章!以下是它的样子

完成的新闻文章