在网页中，我们可以用CSS的font-family属性来定义字体，然而定义的字体在用户的电脑上能否正确呈现则要看用户的电脑是否安装了该字体。我们经常能看到国外的一些个人网站使用了非常漂亮的字体，而这些字体通常在用户的电脑中是没有安装的，所以用font-family属性就无法实现了，今天我们就介绍使用@font-face实现个性化字体。
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浏览器兼容性如下：
一个简单例子
先声明一个名为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，改进方案是声明两个@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写法。
新闻热点
疑难解答
