WP笔记

Cufon替代方案 —— @FONT FACE

Cufon使设计师不用担心用户电脑上没有安装自己使用的字体,令网页更加吸引眼球。但Cufon有一定的局限性,首先Cufon必须有Javascript的支持,禁用Javascript的浏览器看不到任何效果。其次,对国人来说,Cufon不支持中文是一大麻烦,所以很多使用国外主题的朋友会选择将Cufon剔除。既然对中文支持不好,如果可以只渲染英文、不处理中文的话,或许是个不错的方法。这里就有了一种CUFON的替代方案——@FONT FACE


@FONT FACE效果,不对中文产生影响

@FONT FACE无需Javascript支持,通常情况下,开启@FONT-FACE后,只需要在样式表中按照平时的习惯书写font-family就可以。例如,要使用一种英文字体名叫Arch Rival不确定用户电脑是否安装了该字体,使用@FONT FACE,浏览器就会自动下载该字体,就好像用户安装了该字体一样,启用@FONT-FACE的方法很简单,首先引入所需文件

url包围的字符串代表所需要的文件,字体的安装包中附带,上传到服务器并填写正确路径即可(相对于样式表所在位置的相对路径)

@font-face {
    font-family: 'SFArchRivalRegular';
    src: url('SF_Arch_Rival-webfont.eot');
    src: url('SF_Arch_Rival-webfont.eot?#iefix') format('embedded-opentype'),
         url('SF_Arch_Rival-webfont.woff') format('woff'),
         url('SF_Arch_Rival-webfont.ttf') format('truetype'),
         url('SF_Arch_Rival-webfont.svg#SFArchRivalRegular') format('svg');
    font-weight: normal;
    font-style: normal;
 
}

通过CSS定义样式

h1.fontface {font: 60px/68px 'SFArchRivalRegular', Arial, sans-serif;letter-spacing: 0;}

可以看到为class是fontface的h1 tag加了font属性,与一般的CSS没有区别。

@FONT FACE是完全免费的,你可以下载数百个已经做好的字体包,或者生成自己需要的字体,比生成Cufon简单,且对上传字体文件的大小限制更宽容。不过目前@FONT FACE并不支持中文,上传中文字体无法转换。幸运的是,因为继承了CSS的好处,如果定义的字体不支持中文,就会自动选择用户浏览器默认的中文字体,而不会像Cufon那样中文都变成空白,这点还是非常人性化的。

如果你只想渲染英文字体,中文用常见的字体,那@FONT FACE是不错的选择。

如果你想将Cufon替换成@Font Face,参考文章《如何禁用Cufon功能》。

另外,从性能上讲,如果你能找到Google字体,尽量使用Google字体,Google不提供你要的字体时,可以用@Font Face Generator生成网络字体。

3条评论

  1. Pingback: 发现一个可以将中文字体转换为@font-face的网站 | ~SolagirL~
  2. Pingback: CanIUse.com -轻松 获取HTML5、CSS3各浏览器兼容性 | ~SolagirL~
  3. Pingback: 部分付费字体可以在@fontface中使用 | ~SolagirL~

评论已关闭。