网页字体极致压缩之路

好几年前，看到别人网站的字很好看，然后我想模仿，但那时候我还不知道网页能加载字体，只是以为他通过代码改变了字体显示，研究许久后，我从他网站得到了下面这种代码。

body {
  font-family: "Arial", sans-serif;
}

// 和下面这段

body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}

然后我开始写一个html文件，就必须加入这段代码，但是后来发现，这串代码卵用没有，可能是我眼神不好，觉得加了这段代码页面就高级了。之后更换网站程序，偶然发现一个没见过的文件，后缀是woff2，这是什么。。查了下才知道这是一种字体格式，适用于网页的字体，并且发现了加载这种字体的方法。

body {
    font-family: 字体名称;
}

@font-face{font-family:字体名称;src:url('字体路径')}

像发现了新大陆，疯狂下载字体，但是可能是我哪里出错了，导致网页不显示我下载的字体。于是我另辟蹊径，我去别人网站查看字体，但人家的字体都是很多字符串组成的，并且文件很小，根本不像是一个字体文件，我会想这字体正常吗，二三十kb，这能显示个啥，但那会我还不懂，偶然的机会，我去vivo官网逛，发现他的字体还挺好看的，习惯性查看了一下，发现他网站字体可以下载，也可以外链。

https://wwwstatic.vivo.com.cn/vivoportal/files/image/font/20240910/25338b95f06795ccf1d2579b4e997b37.woff2
https://wwwstatic.vivo.com.cn/vivoportal/files/image/font/20240910/a3b2f702babc3f88fea626c07f52c3d3.woff2

确认字体可以使用后我又去查看其他手机厂商的官网和社区，因为手机厂商都有自己的字体，并且还能免费商用，找了一圈找到了好几个，华为、荣耀、oppo、vivo、小米。我觉得最好看的是荣耀字体，其次vivo，小米，最差的是华为、OppO，我指的网页显示，完整字体还是不错的。

• 华为的鸿蒙字体太虚了，给人一种很朦胧的感觉，刚看很惊艳，哇塞，这么好看的字体，看多了审美疲劳，怎么这么丑。
• OPPO的字体怎么说，太大个了，几个字母能比几个文字还宽。。。不过后续的版本稍微优化一下，但还是挺宽的。

虽然得到了字体的外链，但我不敢直接把外链应用到主题上，这请求这么多，要是被发现了咋整，厂商不得起诉我啊，于是我把woff2文件下载下来，上传到服务器中，在本地加载字体，用久了我又开始纠结，800kb字体能不能再小点啊，还有没有其他办法能缩小字体，毕竟有些人的带宽很小，加载个字体都要半天，我又找找找，又一次突破我的认知，找到了字体cdn。。。还有这玩意，正经吗。

只需将下面代码粘贴到网站上就能显示目标字体。

@import url("https://fontsapi.zeoseven.com/305/main/result.css");

body {
    font-family: "Zen Maru Gothic";
    font-weight: normal;
}

确实能加载，也能显示，但，字是部分部分加载的，能明显看到系统默认字体替换，加载的变化很难受，一段话要加载很多个字体文件，受不了啊，况且这是别人的服务器，也不知能用多久，我还是老老实实用本地字体吧。后来知道了woff2是由普通字体压缩来的，于是我又疯狂下载字体，疯狂的找ttf、otf转woff2，确实能转，但也一言难尽，10m的字体转换压缩后2-4m左右。这么大根本不行，折腾不明白就不折腾了。

前段时间，兴致又来了，嘿嘿，找到的转换网站也更多了，也知道压缩可以指定字，比如我只需要这1000个字，把字体上传，转换压缩，ok，得到了一个700kb左右的woff2字体文件，也能用诶，也没那么难嘛，一口气压缩了好多，能用！但不好用。。都是什么玩意嘛，普通用能用，但碰到有图标，对不齐。。额。

没招了，询问豆包“压缩字体后 iconfont 图标对不齐文字了，是什么原因”

豆包说，压缩时裁剪了图标字体的 em 方格尺寸，我觉得也是这个原因，我让他推荐了几个网站，觉得又有希望了，国内的网站不行，那国外起码能有吧，推荐的网站挺专业的，都是英文。

看不懂，翻译的好像也不准，只能凭感觉选，选好后找上传字体按钮，找半天发现没上传字体按钮，无语。要么就是上传字体后网页宕机，豆包一点也不靠谱。

谁能用明白这两个，我愿称之为大神。

https://transfonter.org/
https://www.fontsquirrel.com/tools/webfont-generator

还是自己找吧，外网那么大，肯定会有的。用浏览器插件批量搜刮，搜刮半天都没找到能用的，调整关键词又搜了半天。

• Online Font Subsetter WOFF2
• Chinese Font Subsetting Online WOFF2
• Subset Font to Custom Characters Online WOFF2

搜出来的网站几乎都是之前打开过的，但也有少部分新网站，快失去耐心的时候，找到了两个网站，第一个网站，能转换压缩，但不确定能不能对齐图标，试了一下发现能对齐，更绝的是压缩出来的文件才，400kb不到？？有点夸张，怎么能这么小！！我又试了试第二个网站，第二网站只能转换ttf格式文件，但，文件也很小！！比woff2格式多300kb左右，这很牛了。

虽然说400kb的字体已经够用了，但脑子里突然想起来，前两天偶然发现字体网站有个工具，叫在线分包。

我还不知道分包是啥呢，上传字体试了一下，能把字体分成很多个文件，然后每个字体文件只包含多少个字，利用css调用，比如网页存在这个字就调用存在那个字的字体文件，这样能省下不少流量，按需请求。虽然知道了这个方法，我把我整个页面的文字复制下来，看下能请求多少个字体文件，结果100个字体文件，请求了90个，这不是脱裤子放屁多此一举。

我的想法是，把一些高频的字，放到一个文件里，那些生僻字放一个文件里，于是我开始寻找分包工具，但，分包是能分，分出来的乱七八糟啊，不能自定义，那弄这个就没意义了，我让ai写了个工具，ai绞尽脑汁写了好久，终于，按我要求写出一个能用的分包工具。

接下来就是头疼的事了，我该如何挑选那些生僻字，先让ai整理了一遍，但效果不行，一些常用字分到生僻字去了，为了完美，不能这样，想到一个思路，可以去找高频汉字，找了很久找到了，很完美！

可以按高频顺序分包字体了~