3.1 網頁字體
在網頁上連接字體在創建獨特和吸引人的設計中扮演著關鍵角色。網頁字體允許使用未安裝在用戶計算機上的字體，通過從伺服器加載它們來實現。Google Fonts 是使用網頁字體最流行的服務之一。我們將更詳細地了解如何在網頁上連接網頁字體和 Google Fonts。
網頁字體 是從遠端伺服器加載並顯示在網頁上的字體，即使它們未安裝在用戶設備上。這提供了更大的字體選擇靈活性，並且可以創建更具吸引力的設計。
連接網頁字體
使用 @font-face 連接網頁字體的示例：
首先需要將字體文件上傳到你的伺服器。通常這是 .woff, .woff2,
.ttf, .eot 和 .svg 格式的文件。
步驟 2. 在 CSS 中使用 @font-face：
@font-face {
font-family: 'MyCustomFont';
src: url('fonts/MyCustomFont.woff2') format('woff2'),
url('fonts/MyCustomFont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
body {
font-family: 'MyCustomFont', sans-serif;
}
使用 @font-face 的優點：
- 控制: 完全控制字體選擇和使用
- 兼容性: 支持不同的字體格式以確保與不同瀏覽器的兼容性
- WOFF (Web Open Font Format): 網頁字體的廣泛支持格式
- WOFF2: WOFF 的改進版，具有更好的壓縮
- TTF (TrueType Font): 大多數瀏覽器支持的標準字體格式
- EOT (Embedded OpenType): Internet Explorer 支持的格式
- SVG: 用於 SVG 圖形中的字體格式
3.2 Google Fonts
Google Fonts 提供了一個免費字體集合，您可以輕鬆整合到您的網站上。使用 Google Fonts 的優點在於連接的簡單性和多樣化的可用字體。
使用 Google Fonts 連接字體：
1. 在 Google Fonts 網站選擇字體：
前往 Google Fonts，選擇你想使用的字體。
2. 獲取連接的鏈接：
在選擇的字體頁面上，選擇所需的字體風格和樣式。然後 Google Fonts 會生成一個接入的鏈接。
3. 將鏈接插入 HTML 文檔：
將生成的鏈接複製並插入到你的 HTML 文檔的 <head> 部分。
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
1. 在 CSS 中應用字體：
使用 font-family 屬性將字體應用於頁面上的元素。
body {
font-family: 'Roboto', sans-serif;
}
h1 {
font-family: 'Roboto', sans-serif;
font-weight: 700;
}
通過 HTML 使用 Google Fonts 的示例：
<html lang="zh-TW">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Google Fonts</title>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
<style>
body {
font-family: 'Roboto', sans-serif;
}
</style>
</head>
<body>
<p>這段文字使用了 Roboto 字體。</p>
</body>
</html>
3.3 使用 CSS @import
你也可以使用 CSS 中的 @import 規則連接 Google 字體。
通過 @import 使用 Google Fonts 的示例：
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
body {
font-family: 'Roboto', sans-serif;
}
使用 Google Fonts 的優點：
- 使用簡便: 只需一行代碼即可輕鬆整合字體
- 多樣選擇: 訪問多種類型和風格的字體
- 性能優化: 字體來自於 Google 的高效能伺服器
在 Google Fonts 網頁字體連接代碼中使用 display="swap" 可以改善性能和用戶體驗。連接網頁字體時，瀏覽器必須首先加載和顯示字體，然後才能顯示文本。這可能會導致延遲，尤其是在網速較慢時。display="swap" 解決了這個問題，指示瀏覽器先使用系統默認字體，待網頁字體加載完成後，再替換成網頁字體。
對性能的影響：
使用網頁字體時，務必考慮其對網頁性能的影響。加載大量字體或樣式可能會增加頁面加載時間。為了最大限度地減少這種影響，請遵循以下建議：
- 使用最少的字體樣式: 僅選擇你真正需要的字體樣式
- 使用屬性
display="swap": 這確保了在網頁字體加載期間使用系統字體顯示文本，改善用戶的性能感知 - 優化字體交付: 使用緩存和預加載（preload）來提升性能
GO TO FULL VERSION