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