接上一次字体优化I的介绍,这次是傻瓜字体压缩(字体包精简)操作教程,用的是Fontmin
的GUI版本,精简掉中文字体中大部分不使用的字体,只留下常用的3500个汉字。
本来是打算全站直接用思源屏显宋体
的,但是实际测试发现win平台上chrome的显示宋体会莫名发虚
。
因此..我用上了宋体。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
删减字体
打开你需要编辑的字体,刚开始可能提示报错什么的,可以直接跳过。
生成字体
菜单栏点选:文件-》生成字体,然后选择要生成的字体格式,再点选Generate即可
Fontmin app使用
这个软件使用非常简单,只需要把你需要的字符填入左区域,然后再选择一个ttf字体
文件(貌似gui版本只能用ttf),再点生成即可。
这里我用的是github里搜到的常用汉字3500
,有能力可以上github搜一下,当然上面的下载地址里也会有。Font-family
属性了。
<p></p>
后记
虽然字体样式只是网页的一个小部分,但是我觉得可读性高的网页意味有一个比较好的用户体验。
当然,这次字体优化给网页响应带来的延迟还算是我的可接受范围内,毕竟受限于的网络状况,CF的状态也不是很稳定,7S左右能加载文字内容就足够了。如果需要再进行速度优化,我可能要尝试一下OSS
(穷啊..),或者再进一步研究分文章字体压缩
了..
<p></p>