网页嵌入特殊字体

2012-12-08 09:51:03

网页上的特殊字体经常应用在青岛网站建设中，通常设计师会采用图片方式，但是使用图片通常会增加网页加载的负担，现在有了新方法，采用网页嵌入特殊字体方式。如下：

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

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

网络字体的基本用法
如下，兼容新版本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格式（如何生成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格式。

上一篇：如何生成eot文件