有时候想让某些好看的字体用在网站上,但是自己电脑上有的字体不代表别人也有,所以一般都使用 OS 上常有的字体。不过 CSS3 的 @font-face 允许我们使用外部字体,让页面在不同 OS (即使该 OS 没有你使用的字体)上显示相同的字体,但问题是 IE6/7/8 不支持 @font-face。在看一些国外网站时发现了 Cufón JavaScript 库。
Cufón aims to become a worthy alternative to sIFR, which despite its merits still remains painfully tricky to set up and use.
Cufón 支持大多数主流浏览器,兼容性强。Cufón 使用起来也很简单,先看看 Demo;我们首先下载 cufon-yui.js(右键另存为),然后在 Generator 页面根据你自己的需要上传转换字体,得到一个字体的 js 文件(例如我的 Neutraface_2_Text_Demi_600.font.js),把前面的两个 js 文件上传到网站,然后在网站的 </body>标签前添加:
<script type="text/javascript" src="Neutraface_2_Text_Demi_600.font.js"></script>
<script type="text/javascript">Cufon.replace('h1');</script>
这样所有 h1 标签的字体他都被替换了。是不是很简单?更多具体参数的使用可以参照 Cufón Documentation,这里有个视频简单介绍 Cufón 使用方法的。
提一下,我尝试转换中文字体,一般中文字体比较大,所以转了好久,没成功;我还是推荐仅对英文字体渲染时使用 Cufón,中文字体转换后文件估计也超大,影响页面速度。
Cufon 现在提供汉字解决方案了,需要的可以参阅这里

我的第一个主题的h1就用confu渲染的,有点拖速度,但是真的挺好看的,尤其是英文
@Weitian Zhao: confu? Cufon 吧?转换字体时设置越多,文件就越大,速度当然就受影响了
@Alan: 乌龙了- -我发现我上不去我博客了,爬墙才等上,但是收到了你的评论邮件,自己手机wap也能上.杯具
看前面看得很激动,以为终于找到想要的了,看到最后一句立即泄气了……呵呵,我只想让XP用户也能看到漂亮的微软雅黑,看来还是没办法呀…
另外请教下Alan,你的这个评论是用的插件么?是什么插件
@brnjah: 呵呵,XP的字体渲染很差,所以我系统用了 GDI++ 渲染,华文黑体-我的最爱
@brnjah: 评论不用插件,用 willin 的 Ajax Comment 代码。你可以参考这里。
好看是好看,但是会降低可用性吧,文字都不能选择了。而且类似的解决方案对中文都是无能为力的…
@Justice: 所以主要应用还是在于对标题文字的渲染。
Cufon 技术的实现策略其实就是以一定标准,在网页相关位置上“画”出了所需要显示的文字字符,并同时替换原先区域所需要显示的文字。英文字体一套也就26个字符还好,中文上千个常用字,就不适合啦。
@freetao: 嗯,好像是用的 Canavas
我以前用过一个插件,好像是把文字+字体文件生成PNG图片,然后放在h1的位置上。
不过感觉这个方法比那个插件好很多哩,seo神马的,而且最近比较喜欢在客户端上面做这种占用高资源的工作。
这样影响速度的一般会放弃……
有中文汉子选择的解决方法了。去看看吧
http://www.cufon-font.com/generate/font_choice.php
可以自选中文文字,快速生成js
@linu28: 非常感谢提醒!
贵站首页标题的虚化效果如何实现呢?求教程
@新民智: 标题虚化?没有啊,不知道你指的是哪里?
老外好多WP主题都用了cufon,弄成中文就杯具。。。
cufon能为一个网站指定多字体吗,如果可以的话,如何实现?
@Jackcheung 可以去官网看文档,但现在我还是推荐你使用 google web font