CSS 中英文使用不同字体

又来捣鼓网页字体了，在此之前已经搞了几篇了

这次要解决的新问题是，如何去掉代码块中难看的中文宋体。

众所周知，绝大部分等宽字体都是不带中文的，如果直接像这样定义代码块的字体：

:root {
    --font-mono: ui-monospace, SFMono-Regular, "SF Mono", "Cascadia Code", "Segoe UI Mono", "Source Code Pro", Menlo, Consolas, "Liberation Mono", monospace;
}

那么在代码里的中文，就会因为没有字体匹配，回落到系统默认的中易宋体，非常影响阅读体验。

下面我们就来解决这个问题。

font-face

通过设置 unicode-range 属性时需要明确字符的 Unicode 范围，可以实现指定中文字符的字体。

@font-face {
    font-family: "ChineseFont";
    src: local("PingFang SC"), local("Microsoft YaHei"), local("Noto Sans CJK SC");
    unicode-range: U+2E80-A4CF, U+F900-FAFF, U+FE30-FE4F;
}

然后在代码字体中加上刚刚设置的自定义字体

:root {
    --font-mono: ChineseFont, ui-monospace, SFMono-Regular, "SF Mono", "Cascadia Code", "Segoe UI Mono", "Source Code Pro", Menlo, Consolas, "Liberation Mono", monospace;
}

代码块中的中文就被替换为了我们指定的中文字体，就是这个效果

print("I can eat glass, it doesn't hurt me."); // 我能吞下玻璃而不伤身体。

font-face#

font-face