引言
在国际化后因为也不怎么关注其他语言的文章,直到我之前冲浪的时候,看到了不错的日文字体,这不得给它抄了,然后就发现我这其他语言的字体真是一言难尽啊
寻找位置
在审查元素发现字体是通过变量控制的,于是我打开了主题里的 scss 文件,查找变量位置,顺利找到
添加字体
按照原命名方式添加了其他语言的字体变量
/**
* 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
属性从而动态替换字体
/* 针对中文(简体) */
: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);
}
这样编译以后就好看多啦