AMP

新增自訂字型

重要事項:本文件不適用於您目前選取的格式 電子郵件

AMP 頁面無法包含外部樣式表,但自訂字型除外。您可以透過兩種方式將自訂字型嵌入到頁面中

  1. 透過 <link> 標籤 (僅限許可清單中的字型供應商)
  2. 透過 @font-face (無限制,允許所有字型)

1. 使用 <link>

使用 <link> 標籤 (通常在頁面的 head 中),如下所示

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Tangerine">

以下來源已加入許可清單,允許透過連結標籤提供字型服務

  • Typography.com: https://cloud.typography.com
  • Fonts.com: https://fast.fonts.net
  • Google Fonts: https://fonts.googleapis.com
  • Typekit: https://use.typekit.net
  • Font Awesome: https://maxcdn.bootstrapcdn.com, https://use.fontawesome.com

2. 使用 @font-face

或者,您可以在 AMP 樣式表中使用 @font-face

<style amp-custom>
  @font-face {
    font-family: "Bitstream Vera Serif Bold";
    src: url("https://somedomain.org/VeraSeBd.ttf");
  }

  body {
    font-family: "Bitstream Vera Serif Bold", serif;
  }
</style>

注意 – 透過 @font-face 包含的字型必須透過 HTTP 或 HTTPS 協定擷取。