跳至主要内容

我換字體了!

· 閱讀時間約 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霞鶖文楷

鑑於對人類家庭所有成員的固有尊嚴及其平等的和不移的權利

結語

大家比較喜歡哪一個呀?寄信告訴我!