使用雲端字型可以讓網站設計更加美觀並提高字體的一致性。常見的雲端字型服務包括 Google Fonts 和 Adobe Fonts。這裡將以 Google Fonts 為例，介紹如何在網頁中使用雲端字型。
1. 選擇字型
首先，訪問 Google Fonts。在網站上，你可以瀏覽各種字型，選擇你想要使用的字型，然後點擊字型旁邊的“+”符號將其添加到你的選擇中。
2. 獲取嵌入代碼
選擇字型後，點擊右下角的面板，然後你會看到一個嵌入代碼。這段代碼會包含字型的連結。通常會有一個標籤，你需要將其複製到你的HTML文檔的<head>部分。
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
3. 在CSS中使用字型
在你的CSS中，使用font-family屬性引用這個雲端字型。例如，如果你選擇的是“Roboto”，可以這樣設置：
body {
font-family: 'Roboto', sans-serif;
}
這樣就能夠在整個網站上使用Roboto字型。如果需要不同的字重（如400和700），確保在選擇字型時都已選中並包含在你的<link>標籤中。
4. 設置其他樣式
你可以進一步設置字型的顏色、大小、行高等屬性。例如：
h1 {
font-family: 'Roboto', sans-serif;
font-size: 36px;
font-weight: 700;
color: #333;
}
p {
font-family: 'Roboto', sans-serif;
font-size: 16px;
line-height: 1.5;
color: #666;
}
5. 響應式設計
為了確保字型在不同設備上的表現，使用媒體查詢來調整字型大小：
@media screen and (max-width: 600px) {
h1 {
font-size: 24px;
}
p {
font-size: 14px;
}
}
6. 考慮性能
雖然雲端字型美觀，但可能會影響頁面加載速度。為了優化性能，應選擇必要的字型樣式和字重，並在使用時考慮緩存。
iThome鐵人賽
看影片追技術