AMP 中設定字型

誠如前面所說的， AMP 並不希望引入外部的檔案。可是…預設的字體就是不得人疼，我就是要另外載入別的字體呀!!

怎麼辦呢?!

有2種方法

方法一：使用 <LINK>

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

方法一：使用 @font-face

1. Step 1 - 請引入 amp-font 這個元件

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

2. Step 2 - 使用 <style amp-custom> tag ，如 CSS 語法那般，設定 @font-face

<style amp-custom>
  @font-face {
    font-family: 'my font name'; /*基本項目*/
    font-style: normal;
    font-weight: 400;
    src: url(fonts/MyFontName.ttf) format('truetype'); /*基本項目*/
  }
  ... /* 視需求設定1組 ~ 多組 */
</style>

3. Step 3 - 在 <style amp-custom> tag 中，設定 font-family

<style amp-custom>
.comicamp-loaded .use-my-font {
  font-family: 'my font name', serif, sans-serif;
}
</style>

4. Step 4 - 善用 <amp-font> tag 設定，使用成功載入的字體

 <amp-font
      layout="nodisplay"
      font-family="My Font Name"
      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>

如上範例；

4.1. layout - 一定要是 nodisplay

4.2. font-family - 字型名稱

4.3. timeout - 非必要項目，預設3000，單位 ms

4.4. on-load-add-class & on-load-remove-class - 非必要項目，於字型載入成功時觸發，對於 documentElement 或 body 元件做 class name 的切換。

4.4. on-error-add-class & on-error-remove-class - 非必要項目，於字型載入錯誤或 timeout 時觸發，對於 documentElement 或 body 元件做 className 的切換。

參考來源：

• AMP官網
• AMP官網
• AMP By Example