itRef.cn技术参考网站

当前位置: 主页 > CSS >

@font-face详解

时间:2010-07-08 10:45来源:未知 作者:adm_ref 点击:
@font-face 是CSS中的一个功能,它允许在网页中显示指定的字体,即使用户的电脑中没有安装该字体。这就意味着设计师和开发人员可以不用考虑web安全字体,如预装在用户电脑中的,Arial、Time New Roman、Verdana 和 Trebuchet等字体。 @font-face的好处: 当

@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的设置,链接字体文件,像链接一张图片一样。

  1. @font-face {  
  2. font-family: DeliciousRoman;  
  3. srcurl(/Delicious-Roman.otf);  

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

  1. h1 {  
  2. font-family: DeliciousRoman, HelveticaArialsans-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是最好的兼容组合。

(责任编辑:wiwi) 转载请注明 来源于itRef.cn技术参考网站:
顶一下
(1)
50%
踩一下
(1)
50%
------分隔线----------------------------
栏目列表
推荐内容