使用任意字体 | 个人博客

在大多数 hexo 主题中，虽然可以指定自定义字体，但是如果这个字体在阅读者的电脑上并没有安装，还是会用回默认的系统字体，这就大大限制了自定义字体的范围。有些 hexo 主题会支持自定义字体，本文将针对两种使用过的主题自定义字体的方法。

Fluid

配置字体路径

1. 将下载好的字体文件（ttf 格式）放到 ${blog_dir}/source/fonts 文件夹下（没有该文件夹就新建一个）。

2. 新建 ${blog_dir}/themes/${theme_name}/source/css/custom.css 文件，将以下内容填写到其中（这里以我将字体命名为 LXGW）：

@font-face {
  font-family: "LXGW";
  src: url("../fonts/LXGW.ttf") format("truetype");
  font-weight: 400;
}

3. 在主题的配置文件中将字体相关配置改为上述指定的字体名称

4. 在主题的配置文件中添加自定义 css 文件（这里以 fluid 主题为例，其他主题大同小异）：

custom_css: /css/custom.css

裁剪字体

如果字体文件比较大，那么网页的加载速度就会变慢，因为需要下载字体文件。实际上我们的博客并不会用到字体文件中的所有字，所以需要通过对字体文件进行裁剪，来保证只有用到的字体才会被放到服务器上供阅读者下载。

1. 安装字体工具

pip3 install fonttools brotli

brew install ripgrep

2. 裁剪字体

pyftsubset fonts/LXGW.ttf --text=$(rg -e '[\w\d]' -oN --no-filename|sort|uniq|tr -d '\n') --no-hinting

pyftsubset 会在原始的字体文件目录下生成一个裁剪后的字体文件。

3. 压缩字体（可选）

fonttools ttLib.woff2 compress -o fonts/LXGW.woff2 fonts/LXGW.subset.ttf

将裁剪后的字体文件转成 woff2 格式可以进一步缩减字体文件大小（可以减少一半左右）。

最后记得在 custom.css 文件中将字体文件的名称修改成最终压缩得到的字体文件名字。

Icarus

在 ${icarus_dir}\layout\common\head.jsx 中修改

default: fontcdn('Fira+Code&family=Noto+Sans+SC:wght@400;700', 'css2')

在 ${icarus_dir}\include\style\base.styl 中修改

$family-sans-serif ?= 'Noto Sans SC', 'Microsoft YaHei', sans-serif
$family-code ?= 'Fira Code', monospace

参考

新的字体，新的感觉

Hexo Fluid主题 添加自定义字体

中文字体压缩的那些事

Icarus4主题自定义记录 | BlakeNeko的博客