国际化适配字体

引言

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

导入字体

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