网页字体文件体积的处理（减小）

前言

我最终还是动起了手敲起了文字，周六真的是很有魔力的一天，对于一个人的生活来说，在没有社交的"裹挟"下如此充沛的时间总是会悄然流逝，怎一个"惜"字了得。

我最近的工作是与网页有关，和以往管理后台不同，或又本质是繁琐的数据交互和展示，然后打算写点与这个有关的。说回主题，网页的设计要素要高于管理后台，其中也包含对字体的要求，一般设计师会给出网页包含的字体，我们使用的是苹果公司的苹方字体，因为非商用，了解到也不需要付费，也就大胆用了。

过程

一行就能下班吗

添加字体我们可以使用font-family属性，它的值是有优先级的一系列的字体。比如下图我们看到写上了很多字体，那系统显示的会是哪个呢？根据官方文档，我们知道它的目标字体是"浏览器会选择列表中第一个该计算机上有安装的字体，或者是通过 @font-face指定的可以直接下载的字体"。我们直接看后半句，对于@font-face属性我们在字体图标那里会遇见，想回忆或了解的小伙伴可以移步文档。犹记得敲下font-family: PingFang-SC-Regular, ...后在心里告诉自己可以做下一个点了。

好耶！字体不是微软雅黑了

上回书说到，岩王爷...（不好意思，串戏了）。根据文档说的，很明显上面的字体不一定会变成苹方字体，解决方法是下载的字体加上@font-face。首先我们找一下字体资源，比如github，体积是10.4M。然后我们开始编码，编码如下：

css代码

xml 复制代码

<style>
    @font-face {
        font-family: 'PingFang-SC-Regular';
        src: url('./PingFang-SC-Regular.ttf');
    }

    div {
        width: fit-content;
        margin: 0 auto;
        font-family: 'PingFang-SC-Regular';
    }
</style>

html代码

css 复制代码

<div>
    <h2>画绢</h2>
    <p>周深</p>
    <p>霜雪河岸轻轻飘来羽衣</p>
    <p>我堆积心绪 在雾中寻你</p>
    <p>你已渐渐远去</p>
    <p>青草离离柳依依</p>
    <p>倾尽丹心 想要画出你</p>
    <p>...</p>
</div>

运行结果

如何查看实际字体，见stackoverflow。

至此算是告一段落了。

常见字的妙用

当我们把目光放到Fast 3G上，我想我们的字体是不是就快变了模样。历经了1分钟，字体文件加载加载出来了。这个时候我们可以选择说服产品文件字体就是这么大，网络慢这个也是因人而异；或是这个不影响功能，下...个版本优化好了；亦或是我再看看有没有什么好办法优化一下哈。我们试着做一下后者。

经上网搜索后有一些方法推荐，这里直接点名一种方法，减少文件体积。那要怎么减少呢，聪明的网友给出的是只需要取常用汉字就可以了，见常用汉字库 3500。那现在需要把字体文件里边儿的对应的3500个汉字取出来就行了。当然，也别漏了英文字母、符号等，见博客。然后我们把二者合二为一，或是直接用博客里的。然后，常见的汉字、字母、符号的文件就完成了。

强大的 python

我们熟知 python 在数据分析的强大，当然在这里也能发挥巨大的作用。这里使用了这篇文章中的方法。可能大家觉得一下子变得要写 python 觉得麻烦了，诚然，安装环境是必要的，不过这对于身经百战的各位来说不在话下。代码的话一般有现成的，所以请减小心理压力。安装好 python 和 fonttools 库后，我们就快成功了。以下是执行的命令和结果：

我们可以看到生成了一个.subset.ttf的新文件，虽然命令有一个警告，如果不影响结果，可以忽略，感兴趣的可以了解一下警告的原因，搜索 <math xmlns="http://www.w3.org/1998/Math/MathML"> W A R N I N G : m e t a N O T s u b s e t ; d o n ′ t k n o w h o w t o s u b s e t ; d r o p p e d \color{red}{WARNING: meta NOT subset; don't know how to subset; dropped} </math>WARNING:metaNOTsubset;don′tknowhowtosubset;dropped

但是这一次写文档发现有情况，生成的文件体积只有4kb，如下图：

这很不对劲，于是我又开始找了其它方法处理，使用了代码的方式，发现这一次虽然有同样的提示，但是体积大小和我认为正常的体积大小差不多。见文章。然后正常了，如下图。当然这个我们判断不了文件理应多大，所以这里不同的情况下大家可以多看看类似的文章。

这时屏幕前好奇的你可能会想计算一下原ttf文件可能有多少个字符呢？我们通过估算

压缩的字体文件

原字体文件

常用汉字库 3500-字母-符号文本大小（个数：3845）

可能有心算能力强的小伙伴已经算出来了:D（大约51424个字符）

再来看看效果吧，再看Fast 3G已是"爱你"的速度。虽然还是很比较慢，但是应该没有3G的信号了吧，并且提升的效果很是明显。

同时我们还可以对其进行压缩，见ttf-to-woff

我们再运行一次，又进步了一点点。

至此在此完结，撒花。

代码github地址

总结

第一次从遇到这个问题到完成已一波三折，写下来期间又遇到了一些问题，过程也是漫长并且自豪的。已经开始写心得和笔记了，在此希望得到大家的指点和建议，遇到不足之处烦请指出，我会加以改进，感谢！

参考

3500常用字+字母+数字+表单符号：blog.csdn.net/littlekard/... 「Python实用秘技16」快速提取字体子集：cloud.tencent.com/developer/a... python提取字体文件中的常用3500字：jonsblog.top/post/6457b5...