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