@font-face 网络字体的中文用法(一)

如果你使用的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+ */
}

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

@font-face 网络字体的中文用法

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

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

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

小结

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

原文来自大牛:http://www.webhek.com/web-font-chinese


未经允许请勿转载:程序喵 » @font-face 网络字体的中文用法(一)

点  赞 (0) 打  赏
分享到: