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 規則。