加拿大预测网-在线预测

信息动态

网站设计是技术与创意的完美融合!

技术资讯

网页嵌入特殊字体

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、F🌊ireဣFox、Opera、Safari（pc）浏览器。

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

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

关于TTF字体转EOT格式（加拿大预测网-在线预测:如何生成eot文件 ？）

微软的WEFT就免了，这个网站能在线转（包含汉字时注意Subsetting的Custom选项）：
//www.fontsquirrel.com/fontface/generator

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

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

0532-85810878 473587358 扫码添加微信

加拿大预测网-在线预测:扫码添加微信

 扫码关注公众号

加拿大预测网-在线预测:官方公众号

 2054585360