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文件的请求,如下图:
关于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格式。
我用这个网址
http://www.fontsquirrel.com/fontface/generator
生成“经典繁颜体”字体 提示我的字体太大,怎么回事,求指教。
很好的办法啊,网站不错。
另外刚刚在IE6里看了下你这个网站,固定在屏幕下方的这个兰色框在IE6不显示。
ie6的话只好跑到页面底部去了
我总觉得 你这个啊….
是不是太窄了…..
还是有点别扭呃….
简洁,漂亮的博客,,收藏了。。