向 Hexo 的 Cactus 主题中引入中文字体

, , , ,

起因和目的

Cactus 是一个比较热门的 Hexo 主题，排版相当简约，而且支持响应式布局（比如将页面缩放得很窄的话，可以发现菜单会被移到页面下方），因此被我采用作为博客的主题。

然而 Cactus 终究没有针对中文浏览进行专门设计，很多页面的样式设计对中文浏览不友善，其中最明显的就是字体问题：自带的 Meslo LG 和 Vazir 并非汉字字体，因此博客中的汉字会被显示为默认字体，非常难看。在这里记录一下调整汉字字体的方法。

修改字体样式

首先需要更改页面中使用的字体样式。在 cactus/source/css/_variables.styl 中进行修改：

1
2
3
4
// Fonts
$font-family-body = "Noto Sans SC"
$font-family-mono = "Fira Code", "Noto Sans SC", monospace
$font-size = 16px

这里将博客主体字体更换为 Noto Sans SC，等宽字体更换为 Fira Code。

另一方面，将字体大小更改到 16px，更方便浏览。

导入字体文件

在更改了字体样式后，需要导入字体文件。

一种导入字体的方式是直接将其附加到网站的素材文件中，这和 Cactus 对 Meslo LG 等字体的做法是相同的。然而，汉语字体文件大小很大（比如 Noto Sans SC 的 ttf 有 8MB 的大小——这还只是 normal 这一个粗细），传输字体文件会造成非常长的加载时间，相当不现实。

CDN 提供了一种加载字体更便捷的方法：

  1. 从传输速度上来看，CDN 的带宽比部署博客的服务器更高，所以传输速度更快；
  2. 从传输文件的大小上来看，字体会被按照字符码拆分成不同的部分，在页面渲染时只需要下载所需的部分。

因此可以在页面的 header 中添加对 CDN 资源的引用，让用户得以更快地获取字体资源。

在 cactus\layout\_partial\head.ejs 中添加内容：

1
2
<link rel="stylesheet" type="text/css" href="https://fonts.font.im/css?family=Noto+Sans+SC:normal,bold,italic">
<link rel="stylesheet" type="text/css" href="https://fonts.font.im/css?family=Fira+Code:normal,bold">

这将在每一页的 head 中添加对 CDN 字体的引用。这里的 CDN 是谷歌托管的 fonts.font.im，在国内也可以访问。

删除原本的资源文件

既然用不上原本的字体文件了，那么就可以对文件进行一些清理：

  • 删除 cactus\source\lib 下 Meslo LG 和 Vazir 两个字体文件夹；
  • 删除 cactus\source\css\_fonts.styl 和 _rtl.styl 中定义字体的内容。