「自学哈网」如何使用CSS3 @font-face 实现个性化字体。-自学哈网

如何使用CSS3 @font-face 实现个性化字体。

在网页中，我们可以使用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浏览器兼容性如下：

3.5+

3.1+

10+

一个简单例子

　　先声明一个名为ChantelliAntiquaRegular的字体，有一种老的写法是这样的：

1 2 3 4 5 6 7 @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，如下：

1 2 3 4 5 6 7 8 9 10 11 @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代码如下：

1 2 3 4 5 .font-face-display { font: 66px ChantelliAntiquaRegular, Helvetica, sans-serif; } < div class = "font-face-display" >Take me to your heartdiv>

　　最重效果如下：

免费字体网站Font Squirrel

　　Font Squirrel是一个非常优秀的免费字体资源网站，收集了很多高品质字体供网页设计者免费下载，还有个字体格式生成工具@font-face generator，上传一个字体文件，可以生成多种字体格式及CSS代码，非常有用。如果你需要一些优秀的免费英文字体，这是个好去处。

　　想要丰富多彩的页面就需要有更多的字体样式，人们想出了很多字体替代方案，除了@font-face方案外还有sIFR、Cufon、Typeface.js等，还有.webfont，简单说，.webfont 就是在字体中嵌入了访问许可表，浏览器可以读出这些许可信息，并决定是否应该下载和渲染这些字体。另外还有Typekit也是一种值得关注的方案，将字体放在第三方服务器上供调用。这些方案的优缺点，将会在以后做详细的介绍。