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