使用任意字体 | 个人博客

本文最后更新于:2022年9月24日

在大多数 hexo 主题中,虽然可以指定自定义字体,但是如果这个字体在阅读者的电脑上并没有安装,还是会用回默认的系统字体,这就大大限制了自定义字体的范围。本文则介绍一种可以让 hexo 博客使用任意字体展示的方法。

使用任意字体

  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;
}
  1. 在主题的配置文件中将字体相关配置改为上述指定的字体名称

  2. 在主题的配置文件中添加自定义 css 文件(这里以 fluid 主题为例,其他主题大同小异):

custom_css: /css/custom.css

裁剪字体

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

  1. 安装字体工具
pip3 install fonttools brotli

brew install ripgrep
  1. 裁剪字体
pyftsubset fonts/LXGW.ttf --text=$(rg -e '[\w\d]' -oN --no-filename|sort|uniq|tr -d '\n') --no-hinting

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

  1. 压缩字体(可选)
fonttools ttLib.woff2 compress -o fonts/LXGW.woff2 fonts/LXGW.subset.ttf

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

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

参考

新的字体,新的感觉

Hexo Fluid主题 添加自定义字体

中文字体压缩的那些事