<!–markdown–>字蛛是什么
字蛛是腾讯前端小组推出的一个font-face工具,主要用于解决网站设计时的字体问题。简述与用例见传送门
字蛛能干什么
它提供了一些便利允许你在某些情况下,让你的设计师随心所欲的使用字体而没后顾之忧。并且,这些字体是可以被使用到网页中去的。
<p><!–more–></p>
工作原理
设计师给我们的设计图上的字体往往美丽动人,但并非所有的客户机都拥有这漂亮的字体。font-face 允许我们使用自定义的字体,在加载网页的时候向客户发送字体文件。但和英文字体不同,中文字体往往都是10M以上,这在天朝的的网络大概需要40秒的加载时间。
字蛛作为一个工具,提供了一种便利:通过爬取网站内已使用的文本,将字体文件中不需要的字体通通删除后重新打包成eof,woff,ttf,svg等流行的web字体。新打包的字体文件由于只包含了很少的字体,所以可以得到令人满意的大小。
使用方式
官网上有很详细的使用说明。其实可以说是简单到了极致,只需要一句命令行语句就搞定了
font-spider /Users/jimo/Documents/website/demo.hijimo.com/fontspider/*.html
在线案例
嗯,我写了一个小demo.使用了目前很火的思源字体。 传送门
实现过程
字蛛使用了三个插件:
使用感受
- 大小:
- 700个不重复中文 150k
- 458个不重复中文 86K
- 242个不重复中文 45k
- 100个不重复中文 21K
- 20个不重复中文 9K
- 兼容性: @font-face 标记在ie6就已开始支持在ie9已经完全支持。见传送门
- 关于源字体:字蛛官方有声明,必须要有ttf格式的字体
- 关于ttf:并不是每一个ttf文件都允许被转换,首先该ttf字体充许这种转换。另有其他网友说有些偏门字体会出错,我没碰到过。
- 关于用户体验:由于使用了外部字体。当第一次字体文件加载好的时候页面会闪一下,非常不友好。第二次或以后再访问由于cookie的存在并不会有这个问题。亦或者可以使用loading的页面事先加载好所需文件。
- 关于使用场景:像企业官网、个人主页等使用少量不重复汉字的场景。博客或内容系统的标题、导航、菜单等非正文栏目。
- 其他,睡醒了再补充