使用任意字体 | 个人博客
本文最后更新于:2022年9月24日
在大多数 hexo 主题中,虽然可以指定自定义字体,但是如果这个字体在阅读者的电脑上并没有安装,还是会用回默认的系统字体,这就大大限制了自定义字体的范围。本文则介绍一种可以让 hexo 博客使用任意字体展示的方法。
使用任意字体
将下载好的字体文件(ttf 格式)放到
${blog_dir}/source/fonts
文件夹下(没有该文件夹就新建一个)。新建
${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;
}
在主题的配置文件中将字体相关配置改为上述指定的字体名称
在主题的配置文件中添加自定义 css 文件(这里以 fluid 主题为例,其他主题大同小异):
custom_css: /css/custom.css
裁剪字体
如果字体文件比较大,那么网页的加载速度就会变慢,因为需要下载字体文件。实际上我们的博客并不会用到字体文件中的所有字,所以需要通过对字体文件进行裁剪,来保证只有用到的字体才会被放到服务器上供阅读者下载。
- 安装字体工具
pip3 install fonttools brotli
brew install ripgrep
- 裁剪字体
pyftsubset fonts/LXGW.ttf --text=$(rg -e '[\w\d]' -oN --no-filename|sort|uniq|tr -d '\n') --no-hinting
pyftsubset 会在原始的字体文件目录下生成一个裁剪后的字体文件。
- 压缩字体(可选)
fonttools ttLib.woff2 compress -o fonts/LXGW.woff2 fonts/LXGW.subset.ttf
将裁剪后的字体文件转成 woff2 格式可以进一步缩减字体文件大小(可以减少一半左右)。
最后记得在 custom.css
文件中将字体文件的名称修改成最终压缩得到的字体文件名字。
参考
评论系统采用 utterances ,加载有延迟,请稍等片刻。