网络字体的中文用法(一)_html/css_WEB-ITnose

如果你使用的Windows XP操作系统，在浏览中文网页时，你会发现网页上的汉字基本上全部都是宋体。这是因为你的操作系统里安装了中文宋体字库，而且被设定为默认字体。浏览器会用你的默认字体显示网页上的汉字。进入Windows7/8时代，Windows系统的默认字体变成了微软雅黑，于是，所有的中文网站上的汉字使用的字体都是微软雅黑。

网页上的汉字显示时使用的字库可以用CSS指定( font-family)，比如说，你不喜欢微软雅黑，你的电脑里安装了另外一种字体，叫做“徐静蕾手写体”，你想用这种字体来显示你的网页上的汉字，你看可以在CSS里这样写：

body {	font-family: '徐静蕾手写体';}

于是，当 你在 你的电脑上浏览你的这个网页时，网页上的汉字将如你所愿的按“徐静蕾手写体”字体显示。请注意，我在“你”和“你的”这几个字上使用了粗体，表示重点提醒。因为，如果是另外一个人，他并没有使用你的电脑，而是使用的他自己的电脑，而他的电脑上并没有安装你最喜爱的“徐静蕾手写体”，那么，他的的电脑上的浏览器将不能识别’徐静蕾手写体’，于是，仍然只能使用电脑里的缺省字体显示网页上的这些汉字。

如何让你的网站的浏览者也能像你一样幸福的使用“徐静蕾手写体”来显示网页上的汉字？方法有两个。第一，告诉这些浏览者，让他们在自己的电脑上也安装“徐静蕾手写体”字体。这样他们的浏览器就能把这种字体加载到页面上显示了。第二种方法是使用web font，也就是网络字体。

对于第一种方法，似乎是最简单的，你只需要在页面是加入一条提示信息，告诉浏览者， 请下载并安装“徐静蕾手写体”能获得最佳浏览体验。但事实上，这是不切实际的，且不说你的网站的浏览者里有多少“电脑小白”——根本不知道什么是“字体”，更不知道如何安装——就算他懂一些电脑知识，他们也未必跟你一样是“徐静蕾手写体”的粉丝。还有更致命的一点，据我所知，“徐静蕾手写体”不是一种免费字体，是要收费的。该字库是由方正电子邀请徐静蕾用硬笔书写而成，网民花10元钱才能下载安装。

对于第二种方法，也就是所谓的Web font网络字体。我需要先说一下它的基本原理。CSS有一种标记叫做 @font-face，在 @font-face声明里，你可以声明一种字体，指定这种字体字体库文件从网络中的某个地方下载。具体的写法如下：

@font-face {  font-family: '徐静蕾手写体';  src: url('http://www.webhek.com/徐静蕾手写体.eot'); /* IE9 Compat Modes */  src: url('http://www.webhek.com/徐静蕾手写体.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */       url('http://www.webhek.com/徐静蕾手写体.woff') format('woff'), /* 所有现代浏览器 */       url('http://www.webhek.com/徐静蕾手写体.ttf')  format('truetype'), /* Safari, Android, iOS */       url('http://www.webhek.com/徐静蕾手写体.svg#svgFontName') format('svg'); /* Legacy iOS */}

当你的网站的浏览者使用的浏览器看到了上面这段CSS代码后，它不再从本地的系统字库里寻找’徐静蕾手写体’字体，而是到 http://www.webhek.com/徐静蕾手写体.eot去把字体下载下来使用(临时使用，并不会安装到用户的系统里)。

这本该是一种十分理想的方法，但偏偏老天跟汉字过不去。这种方法在英文网页中非常的流行，因为英文只有26个字母，一套英文字库总共也就几十KB，从远程服务器上下载这样小体积的字库非常的方便。但一个普通中文字库的体积至少会有2-3MB，因为里面要包含几千个常用汉字。如果为了观看一个只有几百KB的网页，而要下载一个2-3兆的字体库，首先等待下载的时间无法忍受，第二，也真的没必要。

附带还有个绕不开的问题，就是字体版权。英文字*作很容易，因为只有26个字母，自己都能花半天时间画出来，所以英文字体很多都是open source免费的。但一个中文字体库不是凭一个人的力量就能完成的。基本上所有的中文字体都是商业公司开发的，比如所有的方正字体。徐静蕾花了2个多月写了6763个汉字。这些手写字体被方正公司制作成“方正静蕾简体”字库，以10元一套的价格出售。推出的第二天，就有盗用。因为绕不开，下面的内容里我也就不提这个问题了:-( 。

说到这里，估计你跟我一样，觉得灰心丧气。

对于Web程序员来说，网页就是自己的孩子，每个Web程序员都希望把自己的孩子打扮的漂漂亮亮。看到漂亮的字体而无法用，是一件很伤心的事情。

其实不是无法用，还是有办法用的，只是麻烦一点。下面说两种可行的Web Font中文网络字体的用法。

总体思路

关键问题就是体积大(回避版权问题)。那么问题的出路就是减小体积。减小体积的方法是从字体库中把当前网页用到的字挑出来，没用到的字丢掉，合并成一个新的、小的字体库文件。

举个例子，我想在页面上突出文章的标题，而本文的标题是“网络字体(Web Font)的中文用法(一)”，一共19个字，那么，我就从“徐静蕾手写体”字体库中将这19个字提取出来，组成一个新的小字体库，暂且叫它“小徐静蕾网络字体”，于是，我们就可以在CSS里这样写：

@font-face {  font-family: '小徐静蕾体';  src: url('http://www.webhek.com/小徐静蕾网络字体.eot'); /* IE9 Compat Modes */  src: url('http://www.webhek.com/小徐静蕾网络字体.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */       url('http://www.webhek.com/小徐静蕾网络字体.woff') format('woff'), /* 所有现代浏览器 */       url('http://www.webhek.com/小徐静蕾网络字体.ttf')  format('truetype'), /* Safari, Android, iOS */       url('http://www.webhek.com/小徐静蕾网络字体.svg#svgFontName') format('svg'); /* Legacy iOS */}

这样的一个只有十几个字的字库，体积不过十几KB，非常适合做网络字体。

相信做技术的人最关心的还是技术问题，程序员可能会问：如何将这些单独的字从字体库中提取出来？然后又如何组成新的字体库文件？鉴于本文的篇幅，我不打算在这里细谈这个问题，但有兴趣的程序员可以先研究一下 FontForge这款开源软件。我将在下一篇文章里详细介绍如何使用PHP动态的提取个体字并将它们合并成小字体文件的方法。这里我要重点讲的不是这种方法，而是第二种方法。

上面说的这种方法要分别生成 .eot、 .woff、 .ttf、 .svg格式的中文字体文件。它的优势在于即使最古老的IE6也支持这种写法。但随着浏览器的进步，现代浏览器的出现，相信这种用法会慢慢的淘汰。在《@font-face的用法》这篇文章里说过，谷歌浏览器、火狐浏览器、Safari浏览器和IE9都支持 .woff格式的字体，并且支持Data URL。于是，如果你的网站只需要兼容现代浏览器，那么，你的CSS里 @font-face的写法只需要这样：

@font-face {  font-family: '小徐静蕾网络字体';  src: url(data:application/font-woff;charset=utf-8;base64, ... ) format('woff'), /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */}

大家可以先感受一下这种用法的效果：

徐静蕾手写字体：

请关注我们的微博@歪脖骇客。

汉仪雪峰字体：

请关注我们的微博@歪脖骇客。

胖头鱼字体：

请关注我们的微博@歪脖骇客。

很漂亮不是！可不是图片哟，你可以用鼠标选择单个中文汉字。

首先是从字体库中提取“请关注我们的微博 @歪脖骇客。”这14个字，然后将它们合并新的 .woff格式的网络字体文件，然后将这个 .woff字体文件生成base64编码的字符串，将这些字符串粘贴到CSS里。我在《SVG的用法》这篇介绍过几款能在线生成base64编码的工具，有兴趣的朋友可以试一下。

这种用法的优势在于，只需要一种所有现代浏览器都兼容的字体格式，而且整个字体库文件(很小，只有几十KB)都存放在CSS文件里，不需要浏览器为下载这些字体文件单独建立一次HTTP连接。

小结

我发现网上还是有一些免费开源的中文字体的，Linux系统使用的中文字体就是的，还有一些是字体公司主动免费提供的中文字体。在下篇文章里我将向大家介绍如何用PHP编程的方式将单个中文汉字从字体库中提取出来，并合并成一个新的小字体文件，让我们的中文网页也能简单灵巧的使用web font网络字体。请关注@歪脖骇客，获取本站最新动态。