添加字体
在 AMP 中,为了尽可能快地保持文档的加载时间,您不能包含外部样式表。但是,此规则有一个例外——字体。
您可以通过两种方式将自定义字体嵌入到您的 AMP 页面中
- 通过
<link>
标签:仅适用于允许列出的字体提供商。 - 通过使用
@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 新闻文章!以下是它的样子