看上一款比较好看的字体,但是文件太大,会对网站的访问速度有拖累,而且也只是需要其中的几个特殊字符,于是就想到了这样的方法。

​​‌‌​​​‌‌​‌​​‌‌‍​‌​‌‌‌​​‌‌‌‌​‌​‍​‌​​‌​​​‌​​​‌‌​‍​‌​‌‌​​​‌‌​​​​​‍​​‌​‌‌‌‌‌‌‌‌​​​‍​‌‌​​‌‌‌​‌‌​​‌‌‌‍​‌‌​​​‌‌‌​​​‌​‌‍​​‌‌‌‌‌‌‌‌​​‌‌‍​‌​​‌​​​​​​​‌‌​‍​‌​‌‌​​‌​‌​​‌​‌‍​‌​​‌​​​‌​‌‌‌​‌‍​‌​​‌​​‌​‌​‌​​​‍​‌‌​​​​‌​‌​‌‌​​‍​​​‌​​‌​‌‌‌‌​‌‌‍​‌‌​​​​‌‌‌​​‌‌‌‍​‌​‌‌​​‌‌‌​‌​​‌‍​​​​​​​​‌‌‌‌​​‌‌‍​​​​​‌‌​‌​​​​​‌‍​​​​‌​​​‌‌‌‌‌‌‌‍​‌​​‌​​‌​‌​‌​​​‍​‌‌​‌​​‌​​‌‌‌​​‌‍​​‌‌​‌​​‌‌‌‌​​​‍​‌‌​​​‌​​​​‌​​‌‍​‌​‌‌​​​‌‌‌​‌​​‍​​​​​​​‌‌​‌​‌‌​‍​‌‌​​​‌‌‌‌‌​‌​‌‍​‌​‌‌​​‌​‌‌‌‌​​‍​‌​‌‌‌‌‌‌‌‌​​‌​‍​​​​​​​​‌‌‌‌​​‌‌‍​‌​‌‌​‌​‌​‌‌‌‌‌‍​‌‌​‌‌‌‌‌‌‌​​​​​‍​​​​​​​‌​‌​‌‌‌​‍​​​​‌​‌​​‌​​‌‌​‍​‌​‌‌​‌​‌​‌‌‌‌‌‍​‌‌‌​​​​‌​​​​​‌​‍​‌‌​‌‌‌‌‌‌‌​​​​​‍​‌​​​​‌​‌​‌‌​​‌‍​​‌‌‌‌‌‌‌‌​​‌​‍​​​​​​​​‌‌‌‌​​‌‌‍​​​‌​‌​‌‌​​‌‌‌​‍‌​​​‌​​​‍‌​​‌​‌‌‌‍‌​​‌​‌‌​‍‌​​​‌​‌‌‍‌​​‌‌​‌​‍‌​​‌‌​​‌‍‌​​‌‌‌‌​‍‌​​‌​​​‌‍​‌‌​​​‌​‌‌‌​​​‌‍‌‌​​‌‌​‌‍‌‌​​‌‌‌‌‍‌‌​​‌‌​‌‍‌‌​​‌‌‌‌‍‌‌​‌​​‌​‍‌‌​​‌‌‌‌‍‌‌​​‌​‌‌‍‌‌​‌​​‌​‍‌‌​​‌‌‌‌‍‌‌​​​‌‌‌‍​‌​‌‌​‌‌‌‌​​‌​​‍​‌‌​​​​‌​‌​​​‌‌‍​​​​​​​​‌‌‌‌​​‌‌‍​‌​‌‌​​​‌‌​​​​​‍​​‌‌​‌​​‌‌‌‌​​​‍​‌​‌​​​‌‌​​‌‌‌‌‍​‌​‌​​​‌​‌‌‌‌‌‌‍​​​​​​​​‌‌‌​​‌​‌‍‌​​‌​‌‌‌‍‌​​​‌​‌‌‍‌​​​‌​‌‌‍‌​​​‌‌‌‌‍‌​​​‌‌​​‍‌‌​​​‌​‌‍‌​‌​​​‌‌‍‌​‌​​​‌‌‍‌​​​‌​​​‍‌​​​‌​​​‍‌​​​‌​​​‍‌‌​‌​​​‌‍‌​​‌‌‌​‌‍‌​​‌‌‌‌​‍‌​​‌​‌‌​‍‌​​‌‌​​‌‍‌​​‌‌‌‌​‍‌​​‌​​​‌‍‌‌​​​‌‌​‍‌‌​​‌​​​‍‌‌​‌​​​‌‍‌​​‌‌‌​​‍‌​​‌​​​‌‍‌​‌​​​‌‌‍‌​​‌‌‌‌​‍‌​​​‌‌​‌‍‌​​‌‌‌​​‍‌​​‌​‌‌‌‍‌​​‌​‌‌​‍‌​​​‌​​‌‍‌​​‌‌​‌​‍‌​​​‌‌​​‍‌​‌​​​‌‌‍‌‌​​‌‌​​‍‌‌​​​‌‌‌‍‌‌​​​‌‌‌‍‌​‌​​​‌‌

写好的文章丢了。。。就简单写写吧

01

一开始用的是 500K 左右的一款字体,并且是放在腾讯云存储桶中的,文件不算太大而且传输速度也没有限制(买了50G 的下行流量,一时半会也用不完)。

但是,今天看到一款带拼音的字体(就是首页大标题那个),8.9MB 的文件

之前用的腾讯云的对象存储,速度非常快,但是就算是速度再快,这么大的文件也顶不住啊,只能想其他办法了。

文件详情
文件详情

02

字体子集生成器:https://www.fontke.com/tool/subfont

网页截图
网页截图

这个工具可以实现抽出一个字体文件里想要的字,再组成精减的字体文件。从9MB压缩到54K,绝对能让你的网站快百倍。

优化前
优化前
优化后
优化后

上传原版字体文件之后,只需要输入需要的字符即可。操作非常简单。

03 End

还有一些其他的同类别的网站,分享一下。

谷雨解字:https://guyujiezi.com

一种基于网页字体技术可用于网页加密、反爬虫、防拷贝的在线工具

百度字体编辑器 FontEdito:http://fontstore.baidu.com/static/editor/index.html

GitHub:https://github.com/ecomfe/fonteditor
一款在线字体编辑器软件, 能够打开本地或者远程的ttf|woff|eot|otf格式的字体文件, 能够导入和导出ttf|woff|eot|svg|otf格式的字体文件, 提供字形的编辑和轮廓编辑功能,提供字体的实时预览功能。

Fontmin:http://ecomfe.github.io/fontmin

一个纯 JavaScript 实现的字体子集化方案。

Snipaste_2020-04-08_20-14-24.png
Snipaste_2020-04-08_20-14-24.png