國際化字型適配

📢 本文由 gemini-3-flash-preview 翻譯

引言

在國際化後，因為平時也不怎麼關注其他語言的文章，直到我之前上網衝浪的時候，看到了不錯的日文字型，這不得給它用上，然後就發現我這其他語言的字型真是一言難盡啊。

匯入字型

Google Fonts

可以透過一些字型服務，例如 Google Fonts 的字型，這樣一般比較方便且快速。

例如我使用了 Comic Neue、Noto Sans JP、Noto Sans SC、Noto Sans TC 以及 Yomogi 字型，全部選擇後 Google Fonts 會生成一個插入的 HTML 標籤，把這個標籤放入 <head> 標籤裡即可。

1
<link href="https://fonts.googleapis.com/css2?family=Comic+Neue:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&family=Noto+Sans+JP:[email protected]&family=Noto+Sans+SC:[email protected]&family=Noto+Sans+TC:[email protected]&family=Yomogi&display=swap" rel="stylesheet">

自由匯入

也可以尋找一些像是 ttf、woff、woff2 檔案作為網站字型，不過一般推薦轉換為 woff2 或 woff 字型會比較好，這樣字型檔案會很小 (更高階的就是把字型檔案分塊之類的優化載入，這點其實看 Google Fonts 的匯入資源就是由很多檔案組成的)。

比如我使用 Yozai Font ，其作者提供的 ttf 檔案相當大，使用一些工具（例如 Transfonter ）壓縮後再引入。

先把字型檔案放入自定義目錄，然後在 SCSS 自定義匯入字型的名稱。
我的定義如下，一般只用 woff2 和 woff 就行，保留 ttf 是為了相容非常老的瀏覽器 ~~(其實是我剛開始不懂直接上傳了，然後很卡才優化的)~~。
然後設定 font-display: swap; 可以保證瀏覽器會先使用其他可用字型，等該字型下載完成後再切換成該字型，不會出現空白，優化閱讀體驗。

1
2
3
4
5
6
7
8
9
@font-face {
  font-family: 'yozai';
  src: url('/fonts/Yozai-Regular.woff2') format('woff2'),
      //  url('/fonts/Yozai-Regular.woff') format('woff'),
       url('/fonts/Yozai-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

尋找位置

對於匯入 Google Fonts 需要插入 <head> 標籤裡，我的主題檔案提供了該標籤的 custom.html 直接放入即可。

對於匯入自己的檔案，主題提供了 custom.scss 直接放入即可。

對於字型設定，我的主題是配置在 variables.scss 裡，所以需要直接在該檔案修改。

設定字型

根據不同語言確定使用不同字型。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
/**
*   Global font family
*/
:root {
    // --sys-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Droid Sans", "Helvetica Neue";
    --sys-font-family: system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;

    --zh-font-family: "yozai", "Noto Sans SC", var(--sys-font-family);
    --zh-TW-font-family: "yozai", "Noto Sans TC", var(--sys-font-family);
    --ja-font-family: "Yomogi", "Noto Sans JP", var(--sys-font-family);
    --en-font-family: "Comic Sans MS", "Comic Neue", var(--sys-font-family);

    --base-font-family: var(--sys-font-family), sans-serif;
    --code-font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

按照原命名方式添加了其他語言的字型變數，然後使用 lang 選擇器來替換字型，也就是偵測網頁根標籤 <html> 的 lang 屬性從而動態替換字型。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
/* 針對中文（簡體） */
:lang(zh), :lang(zh-CN) {
    font-family: var(--zh-font-family);
}

/* 針對中文（繁體） */
:lang(zh-TW) {
    font-family: var(--zh-TW-font-family);
}

/* 針對英語 */
:lang(en) {
    font-family: var(--en-font-family);
}

/* 針對日文 */
:lang(ja) {
    font-family: var(--ja-font-family);
}