amp-font

简介

了解如何使用 amp-font 组件来触发和监控 AMP 页面上自定义字体的加载。

设置

导入 amp-font 组件。

<script async custom-element="amp-font" src="https://cdn.ampproject.org/v0/amp-font-0.1.js"></script>

定义自定义 CSS 规则，以根据字体是否成功加载来设置文档样式。在此处了解所有支持的 css 类。

<style amp-custom>
:root {
  --color-error: #B00020;
  --color-primary: #005AF0;
}
@font-face {
  font-family: 'UnavailableFont';
  font-style: normal;
  font-weight: 400;
  src: url(fonts/UnavailableFont.ttf) format('truetype');
}
@font-face {
  font-family: 'Comic AMP';
  font-style: normal;
  font-weight: 400;
  src: local('Comic AMP'), url(/static/samples/fonts/ComicAMP.ttf) format('truetype');
}
@font-face {
  font-family: 'Comic AMP 2';
  font-style: normal;
  font-weight: 400;
  src: local('Comic AMP'), url(/static/samples/fonts/ComicAMP2.ttf) format('truetype');
}

.unavailable-font-loaded .unavailable-font {
  font-family: 'UnavailableFont';
}
.comicamp-loaded .comicamp {
  font-family: 'Comic AMP';
}
.comicamp2-loaded .comicamp2 {
  font-family: 'Comic AMP 2';
}
.comicamp-loading .comicamp,
.comicamp2-loading .comicamp2,
.unavailable-font-loading .unavailable-font {
  color: var(--color-primary);
}
.comicamp-missing .comicamp,
.comicamp2-missing .comicamp2,
.unavailable-font-missing .unavailable-font {
  color: var(--color-error);
}
</style>

现有字体

amp-font 组件需要嵌入在 body 或 head 中。使用属性 timeout 指定等待字体变为可用的时间（以毫秒为单位）。此属性是可选的，其默认值为 3000。使用 on-error-remove-class、on-error-add-class、on-load-remove-class、on-load-add-class 指定字体是否正确加载时要使用的 CSS 类。此示例演示如果字体下载完成，amp-font 将向根元素添加类 comicamp-loaded。

如果字体 `Comic AMP` 不可用，则此文本显示为红色。

<amp-font layout="nodisplay" font-family="Comic AMP" timeout="2000" on-error-remove-class="comicamp-loading" on-error-add-class="comicamp-missing" on-load-remove-class="comicamp-loading" on-load-add-class="comicamp-loaded">
</amp-font>
<p class="comicamp">
  This text is displayed in red if the font `Comic AMP` is not available.
</p>

不可用字体

在此示例中，amp-font 将向根元素添加类 unvailable-font-missing。

如果字体 `UnavailableFont` 不可用，则此文本显示为红色。

<amp-font layout="nodisplay" font-family="UnavailableFont" timeout="2000" on-error-remove-class="unavailable-font-loading" on-error-add-class="unavailable-font-missing" on-load-remove-class="unavailable-font-loading" on-load-add-class="unavailable-font-loaded">
</amp-font>
<p class="unavailable-font">
  This text is displayed in red if the font `UnavailableFont` is not available.
</p>

仅使用缓存字体

将 timeout="0" 设置为仅在缓存中已存在字体时加载字体。

如果字体 `Comic AMP 2` 未缓存，则此文本显示为红色。

<amp-font layout="nodisplay" font-family="Comic AMP 2" timeout="0" on-error-remove-class="comicamp2-loading" on-error-add-class="comicamp2-missing" on-load-remove-class="comicamp2-loading" on-load-add-class="comicamp2-loaded">
</amp-font>
<p class="comicamp2">
  This text is displayed in red if the font `Comic AMP 2` is not cached.
</p>

需要进一步解释？

如果此页面上的说明未涵盖您的所有问题，请随时联系其他 AMP 用户讨论您的具体用例。

转到 Stack Overflow

未解释的功能？

AMP 项目强烈鼓励您的参与和贡献！我们希望您能成为我们开源社区的持续参与者，但我们也欢迎您为自己特别关注的问题做出一次性贡献。

在 GitHub 上编辑示例

由 @kul3r4 编写