网页字体使用指南

在被 fontmin 和 font-spider 虐得体无完肤后,我决定试试这篇文章中提到的另一个字体压缩工具:

fonttools

常用方案

  1. 使用安全字体
  2. 使用压缩字体
  3. 谷歌字体接口(google fonts api)

大多数网站的中文字体使用的都是安全字体,也就是机器中原生携带的字体,这样的好处是无需通过网络传输字体文件,也就不存在加载过慢的问题。安全字体好用是好用,但是架不住它丑啊,否则我也不会捯饬字体压缩了不是!置于谷歌字体接口嘛,你懂的。

为啥压缩

这里的字体指的是汉字(泛中日韩)字体,拉丁字符或者西里尔字符这种字符数量较少的字体的体积通常比较小,没有压缩的必要。汉字字体通常收录几千上万个字符,大小能达到几十兆字节,而常用的汉字不过两三千,聚焦至单篇文章中可能连一千都不到。倘若每次加载网页时都要将完整的字体文件下载下来,其加载时间是往往是难以忍受的,这样我们就要想法子缩减字体文件的体积。巧的是,字体压缩就是干这个的。

静态压缩

pyftsubset font.ttf --text=$(cat hanzi.txt) --no-hinting

静态压缩:无法保证文章中不会用到常用字表以外的字。

动态压缩

pyftsubset ../font/SourceHanSerifSC-Regular.otf --text=$(rg -e '[\u{0100}-\u{10ffff}]' -oN --no-filename|sort|uniq|tr -d '\n') --no-hinting

动态压缩:每次更新文章后都要执行一次字体压缩流程。