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