新增字型

在 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 新聞文章！以下是它應有的外觀

已完成的新聞文章