加入字型

在 AMP 中，為了盡可能縮短文件載入時間，您無法包含外部樣式表。但是，此規則有一個例外情況，即字型。

您可以透過兩種方式將自訂字型嵌入到您的 AMP 頁面中

在本教學中，我們將使用 <link> 標籤將字型新增至我們的頁面。在 <head> 中新增樣式表連結以請求 Raleway 字型

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

現在，更新您的 CSS body 選取器以包含 Raleway 的參考

body {
  width: auto;
  margin: 0;
  padding: 0;
  font-family: 'Raleway', sans-serif;
}

重新整理您的頁面並查看您頁面的新外觀。此外，檢查 AMP 驗證器的輸出。此外部樣式表請求應該沒有錯誤。

網頁字型可能會對網站效能造成不利影響，即使在其他方面快速的 AMP 網站上也是如此。使用 font-display CSS 屬性來最佳化字型的載入行為。

您已完成您的 AMP 新聞文章！以下是它應該看起來的樣子

已完成的新聞文章