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