欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

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

程序员文章站 2022-06-03 16:03:12
...
如果你使用的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网络字体。请关注@歪脖骇客,获取本站最新动态。