新增字型
在 AMP 中,為了盡可能縮短文件載入時間,您無法加入外部樣式表。不過,這項規則有一個例外:字型。
您可以透過兩種方式將自訂字型嵌入 AMP 網頁中
- 透過
<link>
標記:僅限允許清單中的字型供應商。 - 使用
@font-face
CSS 規則:沒有限制,允許所有字型。
在本教學課程中,我們將使用 <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 新聞文章!以下是文章應有的外觀