引子

接上篇 中文网页中的字体选型及开发指南 ，我们已经知道了中文网页设计的字体理论及原理，现在是时候应用于实践了！

字体定义

Ghost 博客中，以「Casper」主题为例，把全局字体进行了三个变量定义，分别对应「衬线字体」、「非衬线字体」和「等宽字体」，我们只需要在「Code injection」设置中，重新定义它们就能实现全局更改字体的效果了。

在「Site Header」中添加以下代码：

<style>
:root {
--font-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";

--font-serif: Georgia, STZhongsong, "Times New Roman", Times, PMingLiu, STSong, SimSun, "WenQuanYi Bitmap Song", "Noto Serif CJK", serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";

--font-mono: JetBrainsMono, "Source Code Pro", Monaco, Menlo, Consolas, "Courier New", Courier, monospace;
}
</style>

代码中的三个变量分别对应的就是「无衬线字体」、「衬线字体」和「等宽字体」，可以参考上一篇文章，根据自己的喜好进行更改。

对于无衬线字体，我选择用「Segoe UI」作为优先，保障 Windows 用户的体验，这款字体也是 Microsoft 的御用品牌字体。其次用「PingFang SC」苹方，确保 Apple 用户的体验。最后用「“Apple Color Emoji”, “Segoe UI Emoji”, “Segoe UI Symbol”」三个特殊字体加入对 Emoji 和特殊符号的支持。这里是学习了 GitHub 的做法。如果你想把所有特殊符号都渲染为 Emoji，可以学习简书的做法，把这一堆字体提到最前。

至于衬线字体，我保留了 Ghost 原装的 Georgia 字体，这款英文衬线字体确实很漂亮。然后我使用了我个人比较喜欢的「STZhongsong」华文中宋，这款字体党政风满满，听说是党政专用标题字体。最后依然加入了对 Emoji 和特殊符号的支持。

最后是代码中使用的等宽字体，用的是「JetBrainsMono, “Source Code Pro”」，这两款也是我用的最多的代码编辑器字体。当然了，考虑到普通用户的设备上大概率不会安装这种字体，建议再加一行：

<style>
@import url('https://fonts.googleapis.com/css?family=Source+Code+Pro&display=swap');
</style>

使用 Web Font 来渲染等宽字体，保障显示准确。

设置正文字体

我的博客主要以技术类的文章为主，所以我想用「非衬线字体」作为我的正文字体。「Casper」主题默认的正文字体是「衬线字体」而且对于中文来说字体偏大了。

我们可以通过重新定义 Body 和文章部分的字体来更改正文字体。

<style>
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
font-size: 16px;
}

.gh-content>blockquote,
.gh-content>ol,
.gh-content>ul,
.gh-content>dl,
.gh-content>p {
font-family: var(--font-sans-serif);
font-size: 16px;
line-height: 1.8;
}
</style>

这里把正文字体设置为了无衬线字体，并且把字体大小调整为 16px，行间距为 1.8。

参考文献

中文网页中的字体选型及开发指南 - Jacob’s Thoughts