初學者指南：CSS font-family 與 Google Font 的使用
更新日期： 2024 年 10 月 21 日
在網頁設計中，字體是影響用戶體驗和頁面美觀的重要元素之一。
通過 CSS 中的 font-family 屬性，你可以輕鬆控制網頁中文本的字體樣式，讓網站看起來更具個性化和專業性。
此外，Google Fonts 提供了豐富的免費字體，讓開發者能夠輕鬆使用高品質的字體資源。
本文將為新手介紹 CSS font-family 屬性的基礎知識，並教你如何使用 Google Fonts 來豐富你網頁的字體樣式。
什麼是 CSS font-family？
font-family 是一個 CSS 屬性，用於設置元素中文本的字體。
你可以在該屬性中指定一個或多個字體名稱，瀏覽器會依據順序選擇可用的字體顯示。
如果首選字體不可用，則會依次嘗試下一個字體，直到找到一個可用的字體來顯示文本。
語法：
font-family: "字體名稱1", "字體名稱2", generic-family;- 字體名稱必須用雙引號括起來，特別是當字體名稱中包含空格時。
generic-family是一個備選字體系列，用於當所有指定的字體都不可用時，瀏覽器將使用該系列中的默認字體顯示文本。
常見的 generic-family 包括：serif、sans-serif、monospace、cursive、fantasy。
字體系列類型
- Serif（襯線字體）：字體末端有裝飾線條，常用於印刷體。常見的例子是
Times New Roman。 - Sans-serif（無襯線字體）：沒有裝飾線條的字體，更加簡潔、現代，常用於網頁。常見的例子是
Arial。 - Monospace（等寬字體）：每個字母或字符都佔用相同的水平空間，適合用於顯示程式碼。常見的例子是
Courier New。
使用 font-family 的範例
基本範例：設置單個字體
p {
font-family: "Arial", sans-serif;
}在這個範例中，所有的段落 (<p>) 元素會使用 Arial 字體。如果用戶的設備上沒有安裝 Arial，則會使用 sans-serif 作為備選字體。
設置多個字體
h1 {
font-family: "Times New Roman", "Georgia", serif;
}這裡，我們為標題 <h1> 設置了多個字體。
瀏覽器會優先使用 Times New Roman，如果無法顯示該字體，則會嘗試 Georgia。
當這些字體都不可用時，瀏覽器會使用默認的 serif 字體。
字體備選機制的重要性
由於不同的瀏覽器和操作系統可能未安裝相同的字體，指定備選字體能確保用戶仍然能夠以相近的樣式觀看網頁。
因此，撰寫 CSS 時，提供多個字體選項是最佳實踐。
如何使用 Google Fonts
除了系統字體，你還可以使用來自 Google Fonts 的免費字體。
Google Fonts 是一個提供大量高品質、免費字體資源的網站，開發者可以輕鬆將這些字體嵌入到網頁中。
訪問 Google Fonts 網站
打開 Google Fonts 官方網站，你會看到豐富的字體選擇。
你可以通過篩選條件（如字體類型、字體粗細等）來選擇適合你的字體。
選擇字體
在 Google Fonts 網站中選擇一個你喜歡的字體。
例如，你選中了 Roboto 字體。點擊該字體後，會進入詳情頁面。
嵌入 Google 字體
Google Fonts 提供了兩種主要的字體嵌入方式：通過 <link> 標籤或 @import 將字體引入你的 CSS 文件。
方法 1：通過 <link> 標籤引入
在字體詳情頁面中，Google 會為你生成一段 <link> 標籤代碼。你可以將這段代碼添加到你的 HTML 文件的 <head> 部分。
<head>
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
</head>方法 2：通過 @import 引入
如果你更喜歡將字體導入到你的 CSS 文件，可以使用 @import。
@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');將這段代碼放在你的 CSS 文件的頂部。
在 CSS 中使用 Google 字體
一旦字體引入成功，你就可以在 CSS 中使用該字體了。
下面是一個使用 Google Fonts 字體的範例：
body {
font-family: 'Roboto', sans-serif;
}這段代碼將 Roboto 字體應用於整個頁面的文本，如果 Roboto 不可用，則使用 sans-serif 作為備選字體。
避免缺字：載入英文字體與中文字體的最佳順序
當你同時需要在頁面上顯示英文和中文文本時，正確的字體設定順序非常重要。
通常，我們會將英文字體放在 font-family 的前面，然後再指定中文字體。
這樣可以避免英文字體無法顯示時，導致某些英文字元使用中文字體替代，從而產生不協調的顯示效果。
為什麼要先指定英文字體？
- 字符集的不同：英文和中文的字體字符集不同。
當網頁中有英文字體和中文字體混合使用時，先寫英文字體可以確保所有的英文字元都使用預設的英文字體，避免使用中文字體來顯示英文字符，導致字形不匹配或缺字。 - 瀏覽器的字體選擇順序：瀏覽器會根據
font-family屬性中指定的字體順序進行字體匹配。
先指定英文字體能確保英文部分的樣式先被正確應用，然後再為中文部分使用適合的字體。
範例：同時設置英文字體與中文字體
body {
font-family: 'Roboto', 'Noto Sans TC', sans-serif;
}在這個範例中：
Roboto用於顯示頁面中的英文字元。Noto Sans TC是 Google Fonts 提供的適合顯示繁體中文的字體，用於顯示中文字符。sans-serif作為備選字體，當前面兩個字體都不可用時，瀏覽器會選擇默認的無襯線字體。
這樣的字體順序能確保英文和中文的字體樣式一致且協調，避免缺字或字體不匹配的問題。
Google Fonts 的常見應用與注意事項
範例：為頁面設置多種字體
h1 {
font-family: 'Lobster', cursive;
}
p {
font-family: 'Open Sans', 'Noto Sans TC', sans-serif;
}在這裡，我們將 h1 標題設置為 Lobster 字體，而段落文字使用 Open Sans 和 Noto Sans TC。不同的字體為頁面不同部分賦予了不同的風格。
設置字體樣式與權重
Google Fonts 支持多種字體權重和樣式。在導入字體時，你可以選擇不同的字重和樣式來適應頁面設計。
例如，在 Google Fonts 網站上選擇 Roboto 時，你可以指定使用細體（300）或粗體（700）。
p {
font-family: 'Roboto', sans-serif;
font-weight: 300; /* 使用細體 */
}
h1 {
font-family: 'Roboto', sans-serif;
font-weight: 700; /* 使用粗體 */
}性能與可訪問性
使用 Google Fonts 時，雖然它的字體資源被廣泛優化，但仍應注意字體文件的加載對性能的影響。
為了提高頁面加載速度，避免引入過多的字體權重或樣式，這樣能減少不必要的字體文件下載，優化性能。
結語
font-family 是 CSS 中控制字體樣式的關鍵屬性，通過合理使用它，我們可以確保頁面在不同設備和瀏覽器中擁有一致且美觀的文字展示。
借助 Google Fonts，你可以輕鬆地為網站添加高品質的字體，提升網頁的整體設計感和可讀性。
同時，正確的字體順序設置能幫助你避免缺字問題，確保多語言的頁面在顯示上保持協調一致。
無論是設計個性化的標題字體，還是選擇簡潔易讀的段落字體，掌握如何使用 font-family 和 Google Fonts 都能幫助你打造更具吸引力的網頁設計。