CSS 中英文使用不同字体

在 CSS 中设置网页中的中英文使用不同的字体,优化代码阅读体验。

CSS 中英文使用不同字体
Photo by Rachel Crosby / Unsplash

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

中文网页中的字体选型及开发指南
探索中文网页设计中,特别是文字较多的博客类,用那种字体更为合适呢?
给 Ghost 博客更换字体
引子接上篇 中文网页中的字体选型及开发指南[https://www.jacobruan.com/the-font-selection-and-development-guide-in-chinese-web-pages/] ,我们已经知道了中文网页设计的字体理论及原理,现在是时候应用于实践了! 字体定义Ghost 博客中,以 「Casper」 主题为例,把全局字体进行了三个变量定义,分别对应 「衬线字体」、「非衬线字体」和「等宽字体」,我们只需要在「Codeinjection」设置中,重新定义它们就能实现全局更改字体的效果了。 在「Site Header」中添加以下代码: <s…
字体在设计中的运用
字体在设计中占有重要地位,我们要了解字体,明白不同场合应该用什么字体,才能做出令读者舒适的设计。

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

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

: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."); // 我能吞下玻璃而不伤身体。