amp-font

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

amp-font 组件是 AMP 用于控制字体加载超时的解决方案。随着浏览器广泛采用 font-display，此组件不再必要。它适用于旧版用户。请改用 font-display 描述符，以指定在字体是否已准备好以及何时准备好时如何显示字体。

用法

从历史上看，amp-font 扩展用于控制字体加载超时。我们建议改用 font-display 实现此功能。

amp-font 扩展允许根据字体是否已加载或处于错误状态，向 document.documentElement 或 document.body 添加和移除 CSS 类。

示例

<amp-font
  layout="nodisplay"
  font-family="My Font"
  timeout="3000"
  on-error-remove-class="my-font-loading"
  on-error-add-class="my-font-missing"
></amp-font>
<amp-font
  layout="nodisplay"
  font-family="My Other Font"
  timeout="1000"
  on-load-add-class="my-other-font-loaded"
  on-load-remove-class="my-other-font-loading"
></amp-font>

此组件观察字体加载。当字体成功加载时，它会执行可选的 on-load-add-class 和 on-load-remove-class 属性。如果字体加载导致错误或超时，它会运行 on-error-remove-class 和 on-error-add-class。这些类会切换独立文档的 documentElement，以及没有 documentElement（即在 ShadowRoot 内）的文档的 body。

使用这些类来防止显示字体并获得以下结果

• 在 Safari 中获得与其他浏览器类似的短超时（例如 3000 毫秒）
• 实现 FOIT，其中页面在字体进入之前不显示任何文本
• 将超时设置得非常短，并且仅在字体已缓存时才使用字体。

属性

font-family

自定义加载字体的字体系列。

timeout（可选）

自定义字体加载的允许时间（以毫秒为单位）。未定义时默认为 3000。当设置为 0 时，此组件仅在字体位于缓存中时才加载字体。如果设置为无效值，则会恢复为 3000。

on-load-add-class（可选）

自定义字体可用后添加到文档根的 CSS 类。

on-load-remove-class（可选）

自定义字体可用后从文档根中移除的 CSS 类。

on-error-add-class（可选）

如果在字体可用之前超时间隔用完，要添加到文档根目录的 CSS 类。

on-error-remove-class（可选）

如果在字体可用之前超时间隔用完，要从文档根目录中移除的 CSS 类。

font-weight（可选）

行为与标准 CSS font-weight 属性相同。

font-style（可选）

行为与标准 CSS font-style 属性相同。

font-variant（可选）

行为与标准 CSS font-variant 属性相同。

布局

layout 属性必须设置为 nodisplay。

验证

请参阅 AMP 验证规范中的 amp-font 规则。