接上一次字体优化I的介绍,这次是傻瓜字体压缩(字体包精简)操作教程,用的是Fontmin的GUI版本,精简掉中文字体中大部分不使用的字体,只留下常用的3500个汉字。

本来是打算全站直接用思源屏显宋体的,但是实际测试发现win平台上chrome的显示宋体会莫名发虚
因此..我用上了宋体。

ULZ95n.th.jpg
ULZ95n.th.jpg
所有字体加起来大概有3M左右的大小,再加上CF家的代理,说实话还是很慢的..
由于svg字体包太大,我直接舍弃了IOS平台的兼容,还有IE这么古老的浏览器不舍弃干嘛?(狗头)
测试情况:

  • 除了IOS和IE用户,其他平台的字体样式一致
  • 电脑端为移动线路,加载文字内容大概要7-10s,而完全加载完字体要1min以上,这个速度说实话完全高兴不起来;
  • 手机端为联通线路,加载很快,3-4s即把所有web资源加载完。(辣鸡移动实锤O__O"…)
    <p></p>

用到的软件:
FontForge:上次介绍过,编辑字体包的软件,不过删减字体的操作感觉太繁琐不是很友好(可能我还不会用)
Fontmin app:字体子集化并生成相应的css代码

下载地址(免墙):

密:noname
<p></p>

FontForge使用

修改默认语言

这软件默认安装语言没有中文,但里面其实是有中文的!
具体方法是在软件根目录找到fontforge.bat,右键编辑,把set LANGUAGE=那一行前面的双冒号去掉,然后再把该行改成set LANGUAGE=zh_CN

删减字体

打开你需要编辑的字体,刚开始可能提示报错什么的,可以直接跳过。

ULQ8fJ.png
ULQ8fJ.png
选择你不需要的字体,比如我用不上的某些特殊符号和日文字体,右键-》Clear
ULQJp9.png
ULQJp9.png

生成字体

菜单栏点选:文件-》生成字体,然后选择要生成的字体格式,再点选Generate即可

ULQ1kF.png
ULQ1kF.png

Fontmin app使用

这个软件使用非常简单,只需要把你需要的字符填入左区域,然后再选择一个ttf字体文件(貌似gui版本只能用ttf),再点生成即可。
这里我用的是github里搜到的常用汉字3500,有能力可以上github搜一下,当然上面的下载地址里也会有。

ULQ3Y4.png
ULQ3Y4.png
生成完之后会直接弹出生成好的文件,可以对比一下精简后的字体大小。
ULQQTU.png
ULQQTU.png
最后就是css引用了,把刚刚生成的css文件里面的url修改成正确的路径,然后复制到网站的css里,然后就可以用Font-family属性了。
<p></p>

后记

虽然字体样式只是网页的一个小部分,但是我觉得可读性高的网页意味有一个比较好的用户体验。
当然,这次字体优化给网页响应带来的延迟还算是我的可接受范围内,毕竟受限于的网络状况,CF的状态也不是很稳定,7S左右能加载文字内容就足够了。如果需要再进行速度优化,我可能要尝试一下OSS(穷啊..),或者再进一步研究分文章字体压缩了..
<p></p>

参考链接

https://www.jianshu.com/p/bd9d78e3e11a