Switch Chinese font

[tomy0000000]

Open 粉圓

[tomy0000000]

中文字體載入似乎有很多毛病：Reference

目前已知幾種優化作法：

• justfont 會動態產生字體檔案，可是要錢 QQQQQ
• 加上 font-display: swap 先用預設的字體，載入完成再變化，使用者體驗感覺不太好，不太喜歡 👉🏻👈🏻
• Subsetting，跟 justfont 很像，但是是事先完成

[tomy0000000]

目前看起來可以試試看的方案：

• Google Font 似乎有提供類似 justfont 動態產生字體的功能，可是只支援 Noto 等本來就在 Google Font 上的字體
• Subsetting 的方案
  • fonttools + pyftsubset：參考這個 gist
  • allsorts subset 看起來很摩登但是不知道夠不夠成熟

[tomy0000000]

Further Readings:

• Oops…你的網站，也許不適合 Google Fonts API
• The Best Font Loading Strategies and How to Execute Them
• The Fastest Google Fonts

[tomy0000000]

Font selection needs more research to put into production. Some great articles:

• 45 個設計師必收藏的中文、英文免費字體資源下載
• 適合閱讀的中文字體

[tomy0000000]

Types of font:

• Serif 襯線字體，相當於宋體
• Sans-serif 無襯線字體，中文字體又會依轉角處區分出
  • 黑體 a.k.a. 方體
  • 圓體