𝑾𝑱𝑼𝑵

如何优雅的使用一款字体

技术相关847 字220 阅读0

折腾了一下网站的字体。

第一次用心仪的字体时采用的是霞鹜文楷。

那时候还不太懂这个问题，直接把十多mb的ttf文件扔到网站上了，体验可想而知有多差。后面放弃了，很长时间没有再用字体。

前两天偶然在别人的博客上看到这个原侠正楷的字体，感觉阅读文章时很舒服，所以决心还是折腾一下。

开始

大概思路是将原文件ttf子集化（只取自己用到的字，去除一些不常用的生僻字），然后转换成woff2格式。在网上能找到很多种方法，我选了一种最适合我的方法，下面记录一下流程。

  1. 新建文件夹，随便叫什么都行
  2. 把下载的字体文件xxx.ttf放进去
  3. 在文件夹中新建一个chat.txt的文件，里面放入你需要用到的字体，符号等。我放的是3500个常用汉字和一些常用的字符。
  4. 在文件夹终端执行指令pip install fonttools，下载转换工具
  5. 最后输入命令转换：pyftsubset xxx.ttf --text-file=chars.txt --output-file=xxx.woff2 --flavor=woff2 --layout-features='*'
  6. 命令执行后会在文件夹中多出一个xxx.woff2的字体文件，直接拿去用就行。

尝试了一下可以将14mb的文件转换成898kb的文件，亲测好用。

总结

如果使用后发现有的字并没有变成想要的字体，那么将这个字加入到chat.txt中重新走一遍流程就行了。在网上有一些能够自动检测你网站中出现的字并生成对应字体文件的工具，我没有尝试，因为我的文章都是放在数据库中的，检测不到。

我最后的产物是898kb是因为我的chat.txt中文字 + 字符等差不多有四千多个内容，如果你选择简单点的字体，或者使用更极限的子集，产物还可以更小。

一个推荐的配置：在index.html中写入如下代码：

<link rel="preload" href="./src/assets/fonts/xxx.woff2"
  as="font" type="font/woff2" crossorigin>

浏览器会优先加载这个文件，而不是等 CSS 中的 @font-face 再去请求，首屏文字能更快显示自定义字体，避免字体闪烁（FOUT）时间太长

评论

发表评论