CSS学习教程:@font-face网页中显示指定的字体

武林网(www.vevb.com)文章简介：@font-face 是CSS中的一个功能，它允许在网页中显示指定的字体，即使用户的电脑中没有安装该字体。这就意味着设计师和开发人员可以不用考虑web安全字体，如预装在用户电脑中的，Arial、Time New Roman、Verdana 和 Trebuchet等字体。

@font-face 是CSS中的一个功能，它允许在网页中显示指定的字体，即使用户的电脑中没有安装该字体。这就意味着设计师和开发人员可以不用考虑web安全字体，如预装在用户电脑中的，Arial、Time New Roman、Verdana 和 Trebuchet等字体。

@font-face的好处：

当前网页设计流行在网页中的标题、Logo和题目中使用非网页安全字体。这就意味着如果我们使用没有预装在用户电脑的字体时，我们必须使用一些方法来解决这个问题，如使用背景图片来替换。还有其它如cufon网（）上提供的方法。使用@font-face，我们可以避免隐藏标题和花费更多时间去做每一张背景图片，只需要在服务端放置一个字体，节省了时间和带宽。

使用@font-face

使用@font-face很简单，你只要简单地在样式表中包含@font-face的设置，链接字体文件，像链接一张图片一样。

然后，如果要设置h1中的字体，就像下面的例子：

上面这个例子还使用了后备字体选项，防止@font-face不被支持。

@font-face的兼容性

IE支持@font-face已经有好多年了，而FF(火狐)到3.5版本才支持，是最后一个主流浏览器支持@font-face。

根据NetMarketShare最新的统计，我们可以得到最少92%的浏览器都支持@font-face。

以我看来，更高安全级别的浏览器都将支持@font-face，因为许多非IE用户和许多非流行web浏览器被包括在统计内。许多剩下来的8%用户应该是移动用户。IPhone和iPat一样都支持@font-face。

@font-face文件的格式

为了满足92%的用户，我们需要参考以下的文件格式：

所以，.eot .ttf 或者 .otf .svg .woff是最好的兼容组合。