AMP

添加自定义字体

AMP 页面无法包含外部样式表,但自定义字体除外。您可以通过两种方式将自定义字体嵌入到您的页面中

  1. 通过 <link> 标签(仅限允许列出的字体提供商)
  2. 通过 @font-face(无限制,允许所有字体)

1. 使用 <link>

使用 <link> 标签(通常在页面的头部),如下所示

<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.comhttps://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 方案获取。