CSS学习教程:@font-face网页中显示指定的字体
日期：2013-11-27 浏览次数：20909 次
@font-face 是CSS中的一个功用，它允许在网页中显示指定的字体，即便用户的电脑中没有安装该字体。这就意味着设计师和开发人员可以不用考虑web安全字体，如预装在用户电脑中的，Arial、Time New Roman、Verdana 和 Trebuchet等字体。
@font-face的好处：
当前网页设计流行在网页中的标题、Logo和题目中使用非网页安全字体。这就意味着如果我们使用没有预装在用户电脑的字体时，我们必须使用一些方法来处理这个问题，如使用背景图片来替换。还有其它如cufon网（http://cufon.shoqolate.com/generate/）上提供的方法。使用@font-face，我们可以避免隐藏标题和花费更多时间去做每一张背景图片，只需求在服务端放置一个字体，节省了时间和带宽。
使用@font-face
使用@font-face很简单，你只需简单地在款式表中包含@font-face的设置，链接字体文件，像链接一张图片一样。
- @font-face {
- font-family: DeliciousRoman;
- src: url(/Delicious-Roman.otf);
- }
然后，如果要设置h1中的字体，就像下面的例子：
- h1 {
- font-family: DeliciousRoman, Helvetica, Arial, sans-serif;
- }
上面这个例子还使用了后备字体选项，防止@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%的用户，我们需求参考以下的文件格式：
- IE所有版本：EOT
- Safari (3.2 ): TTF / OTF
- iPhone (3.1) SVG
- Chrome (all versions): SVG (TTF/OTF 添加于20101月25日)
- Firefox (3.5 ): TTF/OTF (.WOFF 添加于 3.6 版本)
- Opera (10 ) TTF/OTF
所以，.eot .ttf 或者 .otf .svg .woff是最好的兼容组合。
