中文webfont解决方案

前言

css3的font-face让网页的字体多样性有了很大的提升(该属性的语法使用可参考大漠的这篇文章,本文重点不在于此,不对该属性做太多解释)有了font-face之后,网页上的特殊字体也都可以不再通过切图来解决,完美地解放了切图仔的工作——但是,万恶的但是出现了。
当你的页面里有特殊字体的中文的时候,你会发现直接用font-face引用中文字体是极其不现实的。

场景

假设我们现在手里有这样的一个设计稿,先想下你会怎么做,切图还是?(字体是”汉仪黑棋体简“):

chinese-webfont

不想切图的小C拿到了稿子后想当然地准备用font-face,然后当他找到这个字体的时候,发现字体有整整4M多,而之前接触到的英文字体基本上都是几十K。现在我们知道问题出在哪里了:由于中文字库远比英文庞大,导致中文字体文件大小往往是英文字体的几十倍大小,直接页面上引用的话,不论是对服务器带宽资源,还是用户加载速度,都是极大的挑战。
那么,只能切图了么?

解决方案

英雄总是姗姗来迟,不过好在中文webfont的优秀解决方案现在已经出现了:字体子集化
讲人话的话就是

把需要的中文文字单独从字体中提取出来做成一个新的字体文件,由于字库小了很多,所以字体文件自然也就小了

本来这是件很繁琐的事情,需要手动去编辑字体文件。不过好在BAT三家都出了自己对应的一体化工具,使得我们的工作量小了很多。
腾讯:font-spider(核心使用的font-min)
百度:font-min
阿里巴巴:icon-font font-carrier
以上三家各有优劣,其中腾讯的font-spider的优化核心是用的百度的font-min,可以根据网页内的中文文本自动生成对应字体文件,操作简洁,但依赖node.js且只支持ttf,不支持oft字体;font-min有windows客户端,生成字体的文字需要自行指定;iconfont可以在线生成字体,但是字体有限,开源的核心font-carrier支持的字体方式较多,但是操作较繁琐。所以个人推荐腾讯的font-spider


###DEMO###
font-spider安装过程略过不提,node.js安装之类的百度下即可。
现在回到前面的设计图,做一下演示。(其实官网的例子足够简单了,不过以防万一吧。虽然我也不觉得万一真的有看不懂官网例子的人他可以看得懂我这里的demo。。。)
以上面的端午节为例,我们先新建一个’index.html’文件,然后同级目录下创建一个’font’文件,将字体文件放进去,
然后在html里定义好需要的文字

<div class="font">端午节快乐</div>

然后css(主要是font-face

/*先声明 WebFont*/
@font-face {
font-family: 'hanyi';
src: url('font/hanyi.eot');
src:
/*文件夹里只需要有ttf字体即可,其余字体文件可以为空,font-spider会自动生成*/
/*这里的代码需要注意字体文件的路径,直接复制不一定完全有效*/
url('font/hanyi.eot?#font-spider') format('embedded-opentype'),
url('font/hanyi.woff') format('woff'),
url('font/hanyi.ttf') format('truetype'),
url('font/hanyi.svg') format('svg');
font-weight: normal;
font-style: normal;
}
/*使用选择器指定字体*/
.font{
font-family: 'hanyi';
}

然后win+R输入cmd打开命令行界面,cd到index.html所在文件夹,输入font-spider index.html回车即可(windows用户有个小窍门可以使用:先打开index.html所在文件夹,然后按着shift键,右键,即可选择’在此处打开命令窗口’,可以节省cmd里敲路径的时间)
出现如图所示结果就说明字体子集化完成
font
这时可以看到’font’文件夹下已经自动生成了需要的字体文件,且文件大小都很小(.backup文件是原字体备份,项目上线的时候可以删掉)
font

不做子集化和子集化两次网页请求资源大小:
原字体:
font
处理后:
font

####result####

    
    
端午节快乐
拖动滑块改变文字大小

###tips###
1.由于字体子集化是按需所取,所以如果更改了文字的话,记得重新生成一次字体,否则会出现部分文字没有被该字体渲染的情况
2.虽然font-spider目前只支持ttf的字体,而很多字体官方只发布otf的,这时可以利用fontlab先将其转化成ttf。(虽然其他工具也可以转,但是fontlab是我个人最推荐的,比其余的好用不少)