Cufon替代方案 —— @FONT FACE

最后更新于 2012 年 11 月 20 日

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生成网络字体。

通过CSS定义样式

3条评论