改用一點明體字型

^[1]

這有趣而有力的駁斥：「違反理性討論的底線」，「搞霸權、威權崇拜」，「以外行踐踏與欺凌內外、以無知打倒有知的反學術愚行。」摘自於《傳承字形標準化文件》，作者是一點字坊，同時也是一點明體——也即本文要改用的字型——的作者。

今年有來訪或有訂閱「一休兒之學習動態」的朋友可能已經知道，一休兒今年早些時候已《改用傳統漢字與字形輸入》，理由與探索可參見這篇筆記。這兩天我又將兩网誌 Yixiuer.me 與 io-oi.me 正文字型皆改為傳承字形標準的「一點明體」，我的 Kindle 也已設定為該字型（額外「粗體」設定為 1）。

為甚麼呢？以我自己的主觀體驗來說，使用該字型在閱讀時，確確實實能持續感受到傳承字形印刷體帶來的力量，這種感受，正如上方駁斥般「清晰、理性，結構穩重而明目，筆畫井然且有理」。正因如此，我覺得非常值得為此寫一篇技術文章，一是普及如何在 Web 使用該字型、以及中英混排時斜體的處理，更重要的是記錄下來長久保留不斷聲援傳承字形！

在這裏一休兒也呼籲大家在 GitHub 多多 Star 多多支援《傳承字形標準化文件》與「一點明體」，協力「延續漢字傳統之美」！

一點字坊已提供 I.MingWebfont 网頁字型，使用了與 Google Fonts 相同的子集化技術，並依託 jsDelivr 的 CDN 服務。不過，由於目前設定的 font-display 策略是 block 而非 swap^[2]，所以在字型加載期間，网頁內容是一片空白而非設備回退字型顯示的內容。這帶來不好的交互體驗。

我們可以 Self-host 字型文件來解決這箇問題，儘管這需要加載整箇字型文件（壓縮後約 10.7MB），不是那麼經濟。

一、下載字型

https://github.com/ichitenfont/I.Ming/releases

二、壓縮字型

比如：woff2_compress I.MingCP-8.10.ttf

得到：I.MingCP-8.10.woff2

三、存放字型

比如：static/fonts/I.MingCP-8.10.woff2

四、加載字型

@font-face {
    font-family: 'I.MingCP';
    font-display: swap;
    src: url('static/fonts/I.MingCP-8.10.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
}

五、啟用字型

body {
    font-family: 'I.MingCP', serif;
}

如果部署在 GitHub，我們可套用 jsDelivr 提供的服務^[3]，url 修改為 https://cdn.jsdelivr.net/gh/username/repo/static/fonts/I.MingCP-8.10.woff2，以求更快的加載速度。

一點明體內建的英文（拉丁）字型質量也很高，中英混排顯示效果非常好！但是對於英文，我們經常會有斜體的排版需求，這時透過瀏覽器算法實現的斜體顯示效果就不是那麼美觀了。巧合的是网誌之前使用的 Amstelvar 字型與一點明體的英文字型風格非常相似，其提供單獨設計的斜體 Amstelvar Italic，有非常不錯的顯示效果。

我們可以為斜體單獨設定字型以達到更為美觀的顯示效果。

一、下載字型

https://github.com/googlefonts/amstelvar/tree/main/fonts

二、壓縮字型

比如：woff2_compress Amstelvar-Italic.ttf

得到：Amstelvar-Italic.woff2

三、存放字型

比如：static/fonts/Amstelvar-Italic.woff2

四、加載字型

@font-face {
    font-family: 'Amstelvar';
    font-display: swap;
    src: url('static/fonts/Amstelvar-Italic.woff2') format('woff2');
    font-weight: 100 900;
    font-stretch: 50% 125%;
    font-style: italic;
}

五、啟用字型

em {
    font-family: 'Amstelvar', serif;
    font-variation-settings: 'wght' 280;
}

第五步第二項設定調整字重，達到與一點明體英文字重視覺一致。

^[4]※ Before vs After