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

layout 属性必须设置为 nodisplay。

验证

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