我換字體了!
· 閱讀時間約 3 分鐘
部落格隨筆寫久了,總是會想對視覺介面「動手腳」。最近在瀏覽文章時,總覺得原本的預設字體 越看越醜,決定好好為網站重新挑選一套適合長篇閱讀的字體。
在嘗試了傳統思源黑體、手寫質感的霞鶖文楷與幾款圓體後,最終決定採用 Chiron GoRound TC (圓體)。
為什麼選擇 Chiron GoRound TC?
在挑選字體的過程中,我測試了幾種不同的風格:
- 傳統黑體: 雖清晰但略顯冷冰冰,缺少個人網誌的溫度。
- 文楷/手寫體: 筆觸隨性有質感,但在內文段落過多或粗體顯示時容易顯得膨脹、雜亂。
- Chiron GoRound TC: 保持了圓體柔和、親切的線條,同時兼顧現代網頁文字的結構平衡,粗體反差表現也相當出色。
如何在 Docusaurus 替換字體?
Docusaurus 預設使用 Infima CSS 系統,我們只需要在 src/css/custom.css 中重寫變數,即可完成全站字體的替換。
步驟 1:引入 Google Fonts
開啟 src/css/custom.css,在檔案最頂端引入字體(同時載入 400 常規與 700 粗體):
@import url('[https://fonts.googleapis.com/css2?family=Chiron+GoRound+TC:wght@400;700&display=swap](https://fonts.googleapis.com/css2?family=Chiron+GoRound+TC:wght@400;700&display=swap)');
示範字體
Chiron GoRound TC𫀁圓體
鑑於對人類家庭所有成員的固有尊嚴及其平等的和不移的權利
Noto Sans TC思源黑體
鑑於對人類家庭所有成員的固有尊嚴及其平等的和不移的權利
Noto Serif TC思源宋體
鑑於對人類家庭所有成員的固有尊嚴及其平等的和不移的權利
LXGW WenKai TC霞鶖文楷
鑑於對人類家庭所有成員的固有尊嚴及其平等的和不移的權利
結語
大家比較喜歡哪一個呀?寄信告訴我!