国際化に対応したフォント設定

📢 この記事は ChatGPT によって翻訳されました

はじめに

ブログを国際化してからは他言語の投稿なんてほぼ見てなかったんだけど、
ある日ネットサーフィン中に「おっ、いい感じの日本語フォントじゃん？」ってのを見つけて、「これは導入するしかない！」ってなった。
でもその時に他の言語フォントを見てみたら……ひどすぎて笑った。

対象箇所の特定

要素を調べてみたら、フォントは変数でコントロールされてることがわかったので、
テーマの SCSS ファイルを開いて、変数が定義されてる場所を検索。すんなり見つかった。

フォント追加

既存の命名ルールに倣って、各言語ごとのフォント変数を追加した：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
/**
*   Global font family
*/
:root {
    --sys-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Droid Sans", "Helvetica Neue";
    --zh-font-family: "Noto Sans SC", "PingFang SC", "Microsoft YaHei";
    --zh-TW-font-family: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei";
    --ja-font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "BIZ UDPGothic", Meiryo;
    --en-font-family: "Pacifico", "Dancing Script", "Lobster", cursive;

    --base-font-family: "Lato", var(--sys-font-family), var(--en-font-family), var(--zh-font-family), var(--zh-TW-font-family), var(--ja-font-family), sans-serif;
    --code-font-family: Menlo, Monaco, Consolas, "Courier New", var(--en-font-family), var(--zh-font-family), var(--zh-TW-font-family), var(--ja-font-family), monospace;
}

保存してビルドしてみたけど、特に変化なし。

言語別フォント上書き設定

実は lang セレクタで言語ごとにフォントを上書きできる。つまり <html lang="xx"> によってフォントを切り替えるようにすればいいってこと。

 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);
}

このスタイルをビルドして適用したら、見た目が一気に整って満足。