css网络字体 – 网页嵌入字体的基本方法

w3c终于把网络字体纳入议事日程,并在css3中正式出台@font-face属性。

比较惊奇的是在css解析上一直处于劣势的IE浏览器,却从ie6开始就已经支持类型为.eot的网络字体。也正因为如此,使得网络字体在某些场合已经可以投入使用,虽然在庞大的汉字字库下还略显鸡肋。

网络字体的基本用法

如下,兼容新版本chrome、firefox等浏览器,当然还有IE:


@font-face {
	font-family: 'jubailan';
	src: url('font/jubailan.eot');
	src: url('font/jubailan.ttf') format('truetype');
}

.font {
	font-family: jubailan;
	font-size: 26px;
}

效果如下(某不知名手写英文字体+方正黄草简体):
Jubailan 橘白婪ABcDeFGHiJ…

@font-face定义字体,font-family为定义字体的名称可以随便写,src为字体文件路径,.font中的font-family调用刚才定义的名称为jubailan的字体.

eot字体用于微软的IE浏览器,TTF字体用于Chrome、FireFox、Opera、Safari(pc)浏览器。

可能你可能会担心这样写会不会导致IE浏览器也去下载.TTF的字体,其实不会,转包的结果显示IE浏览器只发出EOT文件的请求,Chrome等浏览器则只发出TTF文件的请求,如下图:

IE只有主页面和EOT字体的请求

关于TTF字体转EOT格式

微软的WEFT就免了,这个网站能在线转(包含汉字时注意Subsetting的Custom选项):
http://www.fontsquirrel.com/fontface/generator

或者下载这个TTF2EOT的命令行程序:
http://code.google.com/p/ttf2eot/downloads/list

当汉字字库很大的时候,可以在第一个地址的Custom选项的Single Characters栏中填入需要的文字,其余的部分将被忽略。也可以使用FontCreator把ttf字体中不必要的图元删除,再转成eot格式。

标签: ,

5 条评论 发表在“css网络字体 – 网页嵌入字体的基本方法”上

  1. 佩恩说道:

    我用这个网址
    http://www.fontsquirrel.com/fontface/generator
    生成“经典繁颜体”字体 提示我的字体太大,怎么回事,求指教。

  2. 好用~~~说道:

    很好的办法啊,网站不错。
    另外刚刚在IE6里看了下你这个网站,固定在屏幕下方的这个兰色框在IE6不显示。

  3. 流浪的浪漫说道:

    我总觉得 你这个啊….
    是不是太窄了…..
    还是有点别扭呃….

  4. e团说道:

    简洁,漂亮的博客,,收藏了。。

留下回复