修改博客,字体裁剪

修改博客,字体裁剪

你的字体十分甚至九分的好看

以前在用 WordPress 的Argon主题时,我经常会去 Echo 大佬的博客里看他的美化教程。当时也是刚接触博客圈子不久,只想着怎么让博客更好看。一直在那改样式、改背景、改字体,追求那种独特的"美感"。

但加载也是十分甚至九分的慢

🌙💡📝👇🌏
驿
向上革命,向下实践。

到后来,在我修改现在的博客主题时,发现博客页眉处景深动画标题使用的 阿里妈妈方圆体 字体文件拖慢了博客整体的加载速度,导致加载变慢(↑1145秒)。身为站长的我当然不能忍,很快啊,我就立马打开 DeepSeek 开始求助了起来:

Mugzx

我想要在一个已有的字体文件的基础上保留里面我想要的字体(地球驿站)

(以下是DeepSeek的生成了一大段话之后的总结)
DeepSeek
  • 推荐工具:优先使用 fonttools 命令行工具,快速精准生成子集字体。
  • 手动备用:少量字符或图形界面操作可选 FontCreator
  • 最终验证:务必测试安装后的字体,确保无乱码或缺失。
  • fonttools 需要安装 python 环境,我觉得有点麻烦,直到最后也没用上💦。
  • FontCreator 只能手动的来一个一个删来进行字体子集化处理。

没得到比较满意的回复,我后面就去看了一下其他博主的博客文章,看看有没有人处理过这个问题:

前端字体压缩方案 | 希乐博客

希乐的这篇文章给出了一种前端字体压缩方案,可以保留字体中需要的字符,压缩字体文件大小。符合我的需求,但是只能保留粗体样式,这样一来驿站的字体动画就看不出来效果了。

还有更好的处理方法?

网站

有的兄弟,有的,处理字体的方案当然是不止这两个了,一共有九个。最后还是通过搜索引擎找到了这个字体子集化网站: https://unavatar.webp.se/font-subset.disidu.com?w在线字体裁剪。不过用这个网站裁剪的字体文件还是有些许问题的,通过 FontCreator 打开之后可以发现里面保留了 A B 字形,但话又说回来,字体文件其实处理成这样已经足够了,一两个字形占用不了多少空间。

或命令行

使用必读
👉👉🎨

纸鹿大佬在3月22日的推送更新中提供了命令行生成子集的方案,即借助前面所说的 fonttools 命令行工具生成。

sh
# iconfont 网页版生成的字体子集在 Chrome 124 的版本无法解析,需要借助 fonttools 工具手动生成子集
pip install fonttools brotli
pyftsubset ./AlimamaFangYuanTi.ttf --text=Header文本 --flavor=woff2
矛盾产生,得出结论
Hello,World!

评论区

评论加载中...