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 规则。