Twitter

Cufon 实现网页字体渲染

in Javascript // 21 Comments

有时候想让某些好看的字体用在网站上,但是自己电脑上有的字体不代表别人也有,所以一般都使用 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="cufon-yui.js"></script>
<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 现在提供汉字解决方案了,需要的可以参阅这里

21 responses to Cufon 实现网页字体渲染

  1. brnjah / November 28, 2010 / Reply

    看前面看得很激动,以为终于找到想要的了,看到最后一句立即泄气了……呵呵,我只想让XP用户也能看到漂亮的微软雅黑,看来还是没办法呀…

    另外请教下Alan,你的这个评论是用的插件么?是什么插件

  2. Justice / November 28, 2010 / Reply

    好看是好看,但是会降低可用性吧,文字都不能选择了。而且类似的解决方案对中文都是无能为力的…

  3. freetao / November 29, 2010 / Reply

    Cufon 技术的实现策略其实就是以一定标准,在网页相关位置上“画”出了所需要显示的文字字符,并同时替换原先区域所需要显示的文字。英文字体一套也就26个字符还好,中文上千个常用字,就不适合啦。

  4. 小邪 / November 30, 2010 / Reply

    我以前用过一个插件,好像是把文字+字体文件生成PNG图片,然后放在h1的位置上。
    不过感觉这个方法比那个插件好很多哩,seo神马的,而且最近比较喜欢在客户端上面做这种占用高资源的工作。

  5. linu28 / February 13, 2011 / Reply

    有中文汉子选择的解决方法了。去看看吧
    http://www.cufon-font.com/generate/font_choice.php
    可以自选中文文字,快速生成js

  6. Alan / August 14, 2011 / Reply

    @Jackcheung 可以去官网看文档,但现在我还是推荐你使用 google web font

Trackbacks/Pingbacks:

  1. TOKGOO » Cufon 实现网页字体渲染
  2. wordpress头疼的中文显示问题 - novoroad

Leave a Reply