国际化适配字体

引言

在国际化后因为也不怎么关注其他语言的文章，直到我之前冲浪的时候，看到了不错的日文字体，这不得给它抄了，然后就发现我这其他语言的字体真是一言难尽啊

寻找位置

在审查元素发现字体是通过变量控制的，于是我打开了主题里的 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 属性从而动态替换字体

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

这样编译以后就好看多啦