自定义字体体积过大解决方案

小灰灰 2023-10-13 11:23 44阅读 0赞

前两天刚把网站字体改成了**苹方**，但是没有考虑到字体文件太大的问题，导致新版的博客加载速度贼慢。

而且移动端还会出现加载时间过程页面长时间处于空白状态，贼需要优化加载速度。

今天就来聊聊如何优化自定义字体包的体积。

### 前言 ###

目前网上主流的字体包优化答题分为两个方面。

> 1.  转换字体格式，例如从**ttf**—>**woff2**。
> 2.  使用工具从全部单词的字体文件中提取需要的字体，重新生成新的字体包。

#### 格式转换 ####

肯定会有人问，为什么要从ttf转换成woff2呢？有什么优势？

TTF全名TrueType Font，由美国苹果公司和微软公司共同开发，年限有点久了。而woff2相当于它的升级版吧，对比于ttf最大的优势就是利用了压缩来减少字体包的大小，对网络带宽需求更小且设备上解压速度也很理想。

格式转化后woff2格式大小最多能比ttf格式大小减少50%，压缩比还是非常可观的。

但是woff2的兼容性没有ttf好，主流的浏览器都支持，更久远的浏览器比如大名鼎鼎的**IE**就不支持了。

读者可以根据自身实际情况决定是否转换字体包格式。

#### 字体提取 ####

相较于格式转化，字体提取差不多能比没提取前减少90%，没错只有原来的十分之一的大小。

常用中文大概有3500字，字体提取的原理就是从完整的字体包中把这3500字提取出来单独生成一个新的字体文件，这样就能有效的减少整个包的大小。

目前主流的提取插件是**font-spider**，但是插件只能静态的提取出来网页上存在的中文，对于从服务器传过来的数据则抓取不到，能力有限。所以本文推荐一个使用python开发的工具——**fontTools**，操作简单只需要两个文件——**字体包**和**3500常用字**即可。

### 操作步骤 ###

上面已经介绍了两种方式，博主是两个同时使用了。

字体包大小从原本**12.7M**降到了现在的**444K**，效果杠杠滴！！！ｂ（￣▽￣）ｄ

下面则是介绍具体的操作步骤。

前提条件：电脑上装有python环境，温馨提示最好装最新的，最次也要python3以上。

安装FontTools

pip install fontTools

开始取字体包子集

pyftsubset.exe PingFang\ SC.ttf --text-file=3500.txt

pyftsubset后面跟的第一个参数是字体包的路径，第二个–text-file则是预先准备好的3500个常用字符，执行完后会在当前目录下生成一个子集字体包。

下一步就是转换成woff2格式了，这里是用的一个在线网站进行转的。

网址：[TTF to WOFF2 | CloudConvert][TTF to WOFF2 _ CloudConvert]

每天有10次转换机会，如果超过了需要登录后才能转。

原文链接：[https://www.xiaoliu.life/p/20230704a][https_www.xiaoliu.life_p_20230704a]

[TTF to WOFF2 _ CloudConvert]: https://cloudconvert.com/ttf-to-woff2
[https_www.xiaoliu.life_p_20230704a]: https://www.xiaoliu.life/p/20230704a

发表评论取消回复

表情：

评论列表（有 0 条评论，44人围观）

还没有评论，来说两句吧...

相关阅读

相关自定义字体体积过大解决方案

前两天刚把网站字体改成了苹方，但是没有考虑到字体文件太大的问题，导致新版的博客加载速度贼慢。而且移动端还会出现加载时间过程页面长时间处于空白状态，贼需要优化加载速度。今

小灰灰/ 2023年10月13日 11:23/ 0 赞/ 45 阅读

相关 g++命令编译出来的文件体积过大解决方案

这几天在使用gcc编译器的g++编译cpp文件时，发现即使是一个很简单的代码文件编译出来的exe体积会达到3M以上。我也通过上网究其原因，来和大家分享一下解决方案。文件过

落日映苍穹つ/ 2022年12月20日 11:12/ 0 赞/ 283 阅读

相关 css中使用自定义字体和自定义字体图标

下载并安装`Adobe Illustrator CC 2019`简称AI 下载并安装`FontLab7`简称AI 软件安装包: 链接: [https://pan.ba

素颜马尾好姑娘i/ 2022年12月03日 05:25/ 0 赞/ 437 阅读

相关 antd icons 导致bundle体积过大

问题描述 antd 按需加载引入的，明明只是用了几个icon，然而bundle却多了几百KB `webpack-bundle-analyzer`效果如下： ![ima

叁歲伎倆/ 2022年11月18日 04:59/ 0 赞/ 356 阅读

相关 css自定义字体完美解决方案example

css自定义字体完美解决方案example 参考文章： [（1）css自定义字体完美解决方案example][1_css_example] （2）https://www.

小咪咪/ 2022年09月14日 02:16/ 0 赞/ 209 阅读

相关自定义字体

自定义字体，只是利用一个css的 @font-face { font-family: ; src: url(); }

心已赠人/ 2022年04月22日 00:48/ 0 赞/ 323 阅读

相关 jenkins日志文件体积过大问题

由于dns解析异常的问题，jenkins会不断写日志，很短时间就可以把磁盘写满。处理办法当发现这个问题时，首先当然是删除日志文件，这些文件可以有十几G的体积。

た入场券/ 2022年04月01日 11:37/ 0 赞/ 453 阅读

相关 css字体自定义，bootstrap自定义字体

<style type="text/css"> @font-face{ font-family:myFont;

浅浅的花香味﹌/ 2022年02月22日 00:44/ 0 赞/ 444 阅读

相关 css自定义字体

原创css字体网址 [https://izihun.com/?from=ssc&fk=159768][https_izihun.com_from_ssc_fk_159768

本是古典何须时尚/ 2022年01月29日 13:09/ 0 赞/ 366 阅读

相关 mpdf配置自定义字体

1、将字体文件复制到ttfonts文件夹中 2、修改config\_fonts.php文件例如：我要添加字体roboto，在将Roboto-Light.ttf文件

太过爱你忘了你带给我的痛/ 2021年11月05日 21:42/ 0 赞/ 621 阅读