CSS3教程:利用@font-face实现本性化字体[DW设计]

CSS3 @font-face
说@font-face是CSS3的新特点并不精确,因为CSS2就已经支持了这一特点,并且Internet Explorer早在第5版的时刻就已经支持它了,不过IE实现方法是通过自有的eot(Embeded Open Type)字体魄局,别的浏览器都不支持这个格局.@font-face支持以部属性:

font-family:设置文本的字体名称.

font-style:设置文本款式.

font-variant:设置文本能否大小写.

font-weight:设置文本的粗细.

font-stretch:设置文本能否横向的拉伸变形.

font-size:设置文本字体大小.

src:设置自定义字体的相对途径大概绝对途径.

@font-face浏览器兼容性以下:

4+  3.5+  4+  3.1+  10+

一个简单例子
先声明一个名为ChantelliAntiquaRegular的字体,有一种老的写法是这样的:

@font-face {
font-family: "ChantelliAntiquaRegular";
src: url("Chantelli_Antiqua-webfont.eot");
src: local("☺"), url("Chantelli_Antiqua-webfont.woff") format("woff"), url("Chantelli_Antiqua-webfont.ttf") format("truetype"), url("Chantelli_Antiqua-webfont.svg#webfontZjhIjbDc") format("svg");
font-weight: normal;
font-style: normal;
}

第一个src是兼容IE,第二个src是兼容别的浏览器.local("☺")是一种hack写法,避免从客户端加载字体,这种写法在Android系统中有BUG,感爱好的同学可见《Best Practice For @Font-Face CSS Takes A Turn》,改良筹划是声明两个@font-face,以下:

@font-face {
font-family: "ChantelliAntiquaRegular";
src: url("Chantelli_Antiqua-webfont.eot");
}
@font-face {
font-family: "ChantelliAntiquaRegular";
src: url(//:) format("no404"), url("Chantelli_Antiqua-webfont.woff") format("woff"), url("Chantelli_Antiqua-webfont.ttf") format("truetype"), url("Chantelli_Antiqua-webfont.svg#webfontMFqI76bT") format("svg");
font-weight: normal;
font-style: normal;
}

我们首先声明一个引用eot字体文件的@font-face,以确保它在IE中能正常工作,第二个@font-face引用了多个字体魄局是为了兼容别的浏览器,它们将按次序查找,直到找到支持的格局,这意味着同一个字体需求有多个格局.url(//:) format("no404")是一种Bulletproof写法,感爱好的同学可见《New @Font-Face Syntax: Simpler, Easier》一文.

别的的HTML和CSS代码以下:

.font-face-display {
font: 66px ChantelliAntiquaRegular, Helvetica, sans-serif;
}
<div class="font-face-display">Take me to your heart</div>

最重效果以下:

　

免费字体网站Font Squirrel
Font Squirrel是一个非常优异的免费字体资源网站,汇集了很多高品质字体供网页计划者免费下载,还有个字体魄局生成工具@font-face generator,上传一个字体文件,可以生成多种字体魄局及CSS代码,非常有效.假如你需求一些优异的免费英文字体,这是个好去处.

　　

想要丰富多彩的页面就需求有更多的字体款式,人们想出了很多字体替换筹划,除了@font-face筹划外还有sIFR、Cufon、Typeface.js等,还有.webfont,简单说,.webfont 就是在字体中嵌入了拜候答应表,浏览器可以读出这些答应托息,并决意能否应当下载和渲染这些字体.别的还有Typekit也是一种值得关注的筹划,将字体放在第三方服务器上供调用.这些筹划的优缺陷,将会在今后做具体的介绍.