cufon-yui.js 教程

cufon-yui.js 是一个字体文件，在国外使用的比较多，而国内的用户很少有人使用。

Cufon 字体文件，就是按照 Cufon 所提出的字体描述标准，创建形成的一种字体文件。而和其他字体创建标准如 TrueType、OpenType 等不同的是，按照 Cufon 标准所形成的这一文件本身，就是一个标准的 JavaScript 脚本文件，并交由 Cufon 类库进行解析和处理。

常见的 WordPress 中就有cufon-yui.js 插件，专门用来处理字体。

什么是 Cufon

Cufon 是一个用来替代 sIFR 框架，

实现在网页中对文字字体进行渲染功能的纯 JavaScript 开源类库(cufon-yui.js)。

为什么要使用 Cufon

在web开发中，经常面对的一种“冲突”，即“字体（Font Family）冲突”。

比如设计一个公司的Logo，图片上的一些特殊字体是从ps字库中调出的，当然这些文字在图片上显示肯定是没有问题的，但是如果要在网页中用文本来显示这些效果，就是会让开发人员抓狂了，因为浏览器并不支持所有的字体，这种情况Cufon就会大显身手了。

类似的js库

通过 CSS3 标准下的 @font-face 属性来指定和引入非缺省字体

使用cufon-yui.js库进行渲染

Google font 或者 Google API

下面是 cufon-yui.js 所支持的浏览器

Cufon实现原理

Cufon 技术的实现策略其实就是以一定标准，在网页相关位置上“画”出了所需要显示的文字字符，并同时替换原先区域所需要显示的文字。
借助于浏览器所推出的专有页面绘画方案，如 VML、Canvas 和 SVG 等，来进行页面的绘画。

Cufon 用法

引入 Cufon 核心库。

<script src="cufon-yui.js" type="text/javascript"></script>

引入 Cufon 字体文件。

<script src="Baroque_Script_400.font.js" type="text/javascript"></script>

在完成了上述的两项准备工作后，事实上使用 Cufon 类库来实现对字体的渲染是非常简单的，这仅仅牵涉到了 Cufon 类库所提供的一个核心方法，即 Cufon.replace 方法。

<script>
Cufon.replace('p');    
</script>

其中参数值“p”表示，在本例中 Cufon 将对整个 Web 页面下所有 <p /> 标记对象下的文本，实施字体渲染处理。

下表是Cufon.replace 方法选择符参数值语法规范（部分）。

有兴趣的朋友可以观看我的这篇文章《jQuery+CSS3实现相册拼图效果》，该文章实例中就应用到了cufon-yui.js。

： » cufon-yui.js 教程