I. WordPress多語言網站字體設定教學：最佳實踐建議
對於新手來說，設計多語言網站（例如包含英文、繁體中文、日文）時，字體設定可能讓人困惑。字體不僅影響網站的美觀，還關係到閱讀體驗和效能。以下是兩種常見的設定方法，以及一些實用的建議，幫助你做出最佳選擇。
II. 單語言網站的字體設定
一個單語言繁體中文網站，font-family CSS可能這樣設定：
繁體中文網頁字體設定CSS Demo
/* 繁體中文網頁字體設定CSS */
body {
font-family:
"Noto Sans TC",
"Source Han Sans TC",
"PingFang TC",
"Microsoft JhengHei",
sans-serif;
}
這會將字體應用到整個網站。但如果網站變成多語言，這種全局設定可能不夠靈活，因為其他語言（例如英文或日文）不一定適合這些字型。
III. WP網站多語言化後的調整
以我們的WP Misuzu網站（ https://wpmisuzu.com ）為例，它支援英文、繁體中文和日文。當使用大多數WordPress翻譯外掛（例如 Polylang 或 WPML）並啟用額外語言後，CSS 中的 :lang() 偽類會根據語言標記生效。例如，:lang(zh) 會對應中文頁面。
在多語言網站中，應該根據語言分別設定字體，讓每個語言使用最適合的字型。例如，在 wpmisuzu.com 上，我是這樣設定的：
中文、日文、英文三語言網頁字體設定CSS Demo
/* 中文、日文、英文三語言網頁字體設定 */
:lang(zh) {
font-family:
"Noto Sans TC",
"Source Han Sans TC",
"PingFang TC",
"Microsoft JhengHei",
sans-serif;
}
:lang(ja) {
font-family:
"IBM Plex Sans JP",
"Hiragino Kaku Gothic Pro",
"Meiryo",
"Noto Sans JP",
sans-serif;
}
- 繁體中文 (zh)：使用專為中文設計的字型。
- 日文 (ja)：使用專為日文設計的字型。
- 英文 (en)：建議不額外用 :lang(en) 設定，讓他繼承主題或外掛的預設字型。
IV. 為什麼不需用CSS設定英文lang(en)？
- 英文預設字型已由主題或外掛設定中繼承：大多數WordPress主題或外掛已經為英文設定了合適的字型，例如Arial或Roboto。這些主題通常會強制從Google Fonts或本地伺服器下載字型檔案。因為英文字型檔案很小（通常只有 0.1-2MB），強制下載幾乎完全不會影響使用者體驗。
- 中日文字型的效能挑戰：但如果是中文或日文字型，情況就不同了。例如 “Noto Sans TC”（繁體中文）或 “Noto Sans JP”（日文）這類字型的檔案大小通常在 10-30MB，比英文字型大 10-100 倍。如果強制訪客下載這些大檔案，網站載入速度是一種挑戰，特別是在網路條件不佳時，可能影響使用者體驗。
V. 兩種設定方式的選擇
1. 不強制下載中日文字型
如果你不想強制訪客下載大檔案的中日文字型，可以這樣設定（跟上方的CSS相同）：
中文、日文、英文三語言網頁字體設定CSS Demo
/* 中文、日文、英文三語言網頁字體設定 */
:lang(zh) {
font-family:
"Noto Sans TC",
"Source Han Sans TC",
"PingFang TC",
"Microsoft JhengHei",
sans-serif;
}
:lang(ja) {
font-family:
"IBM Plex Sans JP",
"Hiragino Kaku Gothic Pro",
"Meiryo",
"Noto Sans JP",
sans-serif;
}
怎麼運作：
系統會按順序檢查訪客設備上的字型，從左到右或上到下檢測：
-
- 如果訪客有 “Noto Sans TC”，就用這個。
- 如果沒有，就試下一個（如 “Source Han Sans TC”），依此類推。
- 最後的sans-serif是後備選項，當訪客系統沒有一個指定字型時，使用設備的預設無襯線字型，確保能正常顯示。
- 優點：不增加載入負擔，適合重視效能的網站。
- 缺點：顯示效果可能因訪客設備而異。
2. 強制從Google Fonts下載
如果你希望字體在所有訪客設備上顯示一致，可以從Google Fonts引入字型：
強制從Google Fonts下載字體與多語言設定CSS Demo
/* 強制從Google Fonts下載字體 */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@400;700&family=IBM+Plex+Sans+JP:wght@400;700&display=swap');
/* 多語言字體設定 */
:lang(zh) {
font-family: "Noto Sans TC", sans-serif;
}
:lang(ja) {
font-family: "IBM Plex Sans JP", sans-serif;
}
怎麼運作：
- Google Fonts 引入：
- @import 從 Google Fonts 載入兩種字型：
- “Noto Sans TC”：用於繁體中文 (:lang(zh))。
- “IBM Plex Sans JP”：用於日文 (:lang(ja))。
- wght@400;700 表示載入字重 400（正常）和 700（粗體），display=swap 確保字型載入時不會阻塞頁面渲染。
- @import 從 Google Fonts 載入兩種字型：
- 語言標記觸發：
- 當頁面的 HTML 標記為 <html lang=”zh”>（或 zh_TW）時，:lang(zh) 會生效，訪客瀏覽器下載並應用 “Noto Sans TC”。
- 當標記為 <html lang=”ja”> 時，:lang(ja) 生效，應用 “IBM Plex Sans JP”。
- 後備機制：
- 如果Google Fonts無法載入（例如因網路問題），系統會改用sans-serif（訪客系統的預設無襯線字型） 作為後備方案，確保文字仍能顯示。
注意事項
由於已強制從Google Fonts下載字體，因此只需設定一種字體即可。
VI. 總結: 個人的建議
- 英文用主題預設：由主題或外掛繼承，不必特別用CSS設定。
- 中日文按需選擇：
- 如果追求不影響效能，用第一種方法設定-不強制下載中日文字型。
- 如果追求一致性，用第一種方法設定-Google Fonts強制下載字體，但只選必要字重（例如 400 和 700），以免把字體的全部字重都下載。
- 永遠加後備字型：在font-family最後加上sans-serif或serif，確保文字顯示不出問題。
- 測試效能：用瀏覽器開發者工具檢查載入時間，平衡美觀與速度。
我個人更傾向於第一種方法，不影響效能。
靈活調整
不一定要用這篇文章所選的字型，大家可以根據自己喜好替換，例如把 “Noto Sans TC” 換成 “Source Han Sans TC”，隨時按需求調整喲。
