网络字体(@font-face)虽好,可不能滥用哦~

2019-02-15 微构网络 技术开发

在互联网技术领域,新的技术总是层出不穷,我们确实应该要不断的接受新的技术和思维方式,但也不能为了新而新。今天跟大家分享的一个小案例,就来聊聊关于网络字体的事儿,在前几天无意打开一个网站发现很慢,见过查看网络请求数据是这样的。

这个网页40个请求(对于普通网站来讲还算是正常,毕竟大部分是图片),然而页面大小有25.8MB,打开打开花了20s左右的时间,只能说网站和我的客户端网络带宽足够牛逼,否则会更加慢。看到网络请求大小,很多图片都超过1MB,其实这些图片在该网站展示出来并不大,原因就是取的原图片,这个问题我们日后再说。而最扎眼的莫过于第一个体积最大的资料,我们发现是一个ttf文件,顾名思义就是普通的字体文件。

该文件有14.3MB,我的天!在我们微构网络团队来讲这是无法接受的大小,我们尽量把网站首页都控制在1MB以内,这里一个资源就超过10MB!

当然有时候网站也必须加载大体积文件,如音视频文件,一般使用懒加载(即先等页面加载完全后再加载大文件,然后上CDN)。但这个字体文件,而且是超过10MB的字体文件这么放真的值得商榷。

为什么我们不建议这么做?

1、可以看到该字体正是非常常见的微软雅黑,这个字体在win上是自带的,因此无需通过网络字体加载;而在mac和移动端中客户端也自带类似的字体。总之,它并不是个性化小众的字体,使用网络字体意义不是太大。

2、就算该字体是个性化小众字体,那么为了某少部分子而加载一个10MB+的字体文件,就有点得不偿失了。

3、虽然我不是专业的法律人士,但似乎这么用微软雅黑字体存在侵权嫌疑。因为微软雅黑是方正的版权,我们调用客户端字体,那是用户设备自带的,而把字体文件放在我们云端服务器上性质应该是不一样的。

如果一定要用大体积的字体怎么办?

1、如果只是极少数的文字需要个性化,那么可以用图片代替。

2、一般而言中文字体库都挺大的,如果完整加载会很大的;因此在确定可能用到的常用文字,我们可以剥离出常用的文字。这样精简以后的字体库体积将大大减小。

3、需要注意的是,不管上述的哪种方式;都不能拿着人家的版权字体这么操作,不管你是打在图片上还是提取需要用的文字而形成新的字体包,因为这么干事侵权的。

其实技术跟武功是一样的,你必须有足够的内力方可去驾驭高深的招式,否则就会走火入魔。网络字体的应用也好,其他解决方案或者技术的应用也好,都得结合项目的实际情况做相应的处理。如果只是为了用而用,只会适得其反。

微信与项目经理沟通

解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流

阅读 1400
首页 服务 案例 博客 知识