amp-font

簡介

瞭解如何使用 amp-font 元件來觸發及監控 AMP 頁面上的自訂字型載入。

設定

匯入 amp-font 元件。

<script async custom-element="amp-font" src="https://cdn.ampproject.org/v0/amp-font-0.1.js"></script>

定義自訂 CSS 規則，以根據字型是否成功載入來設定文件樣式。在此處 here 瞭解所有支援的 css 類別。

<style amp-custom>
:root {
  --color-error: #B00020;
  --color-primary: #005AF0;
}
@font-face {
  font-family: 'UnavailableFont';
  font-style: normal;
  font-weight: 400;
  src: url(fonts/UnavailableFont.ttf) format('truetype');
}
@font-face {
  font-family: 'Comic AMP';
  font-style: normal;
  font-weight: 400;
  src: local('Comic AMP'), url(/static/samples/fonts/ComicAMP.ttf) format('truetype');
}
@font-face {
  font-family: 'Comic AMP 2';
  font-style: normal;
  font-weight: 400;
  src: local('Comic AMP'), url(/static/samples/fonts/ComicAMP2.ttf) format('truetype');
}

.unavailable-font-loaded .unavailable-font {
  font-family: 'UnavailableFont';
}
.comicamp-loaded .comicamp {
  font-family: 'Comic AMP';
}
.comicamp2-loaded .comicamp2 {
  font-family: 'Comic AMP 2';
}
.comicamp-loading .comicamp,
.comicamp2-loading .comicamp2,
.unavailable-font-loading .unavailable-font {
  color: var(--color-primary);
}
.comicamp-missing .comicamp,
.comicamp2-missing .comicamp2,
.unavailable-font-missing .unavailable-font {
  color: var(--color-error);
}
</style>

現有字型

amp-font 元件需要嵌入在 body 或 head 內。使用 timeout 屬性來指定等待字型可用的時間 (以毫秒為單位)。此屬性為選用屬性，預設值為 3000。使用 on-error-remove-class、on-error-add-class、on-load-remove-class、on-load-add-class 來指定在字型正確載入或未正確載入時要使用的 CSS 類別。此範例示範如果字型已下載，amp-font 會將類別 comicamp-loaded 新增至根元素。

如果字型「Comic AMP」無法使用，則此文字會以紅色顯示。

<amp-font layout="nodisplay" font-family="Comic AMP" timeout="2000" on-error-remove-class="comicamp-loading" on-error-add-class="comicamp-missing" on-load-remove-class="comicamp-loading" on-load-add-class="comicamp-loaded">
</amp-font>
<p class="comicamp">
  This text is displayed in red if the font `Comic AMP` is not available.
</p>

無法使用的字型

在此範例中，amp-font 會將類別 unvailable-font-missing 新增至根元素。

如果字型「UnavailableFont」無法使用，則此文字會以紅色顯示。

<amp-font layout="nodisplay" font-family="UnavailableFont" timeout="2000" on-error-remove-class="unavailable-font-loading" on-error-add-class="unavailable-font-missing" on-load-remove-class="unavailable-font-loading" on-load-add-class="unavailable-font-loaded">
</amp-font>
<p class="unavailable-font">
  This text is displayed in red if the font `UnavailableFont` is not available.
</p>

僅使用快取字型

設定 timeout="0" 可僅在字型已在快取中時載入。

如果字型「Comic AMP 2」未快取，則此文字會以紅色顯示。

<amp-font layout="nodisplay" font-family="Comic AMP 2" timeout="0" on-error-remove-class="comicamp2-loading" on-error-add-class="comicamp2-missing" on-load-remove-class="comicamp2-loading" on-load-add-class="comicamp2-loaded">
</amp-font>
<p class="comicamp2">
  This text is displayed in red if the font `Comic AMP 2` is not cached.
</p>

需要更多說明嗎？

如果此頁面上的說明未涵蓋您的所有問題，請隨時與其他 AMP 使用者聯繫，以討論您的確切使用案例。

前往 Stack Overflow

未說明的特色功能？

AMP 專案非常鼓勵您的參與和貢獻！我們希望您能成為我們開放原始碼社群的長期參與者，但我們也歡迎您針對您特別感興趣的問題做出一次性貢獻。

在 GitHub 上編輯範例

由 @kul3r4 撰寫