新增自訂字型
重要事項:本文件不適用於您目前選取的格式 電子郵件!
AMP 頁面無法包含外部樣式表,但自訂字型除外。您可以透過兩種方式將自訂字型嵌入到頁面中
- 透過
<link>
標籤 (僅限許可清單中的字型供應商) - 透過
@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 協定擷取。-
作者: @pbakaus