简介： 本文介绍了使用 Cufon 进行网页字体渲染的一般方法和技巧，并以此为基准，介绍了 Cufon 技术的主要实现原理和这一原理的可能应用领域。

这是一篇关于 Cufon 技术的小文章。什么是 Cufon 呢？简单的说，Cufon 是一个用来替代 sIFR 框架，实现在网页中对文字字体进行渲染功能的纯 JavaScript 开源类库。

为什么要使用 Cufon

那么为什么要使用 Cufon 呢？这要从 Web 开发人员，所经常面对的一种“冲突”，即“字体（Font Family）冲突”开始讲起。

通常的这一冲突总是爆发于 Web 页面的设计者（Designer）和开发者（Coder）之间。在很多场合下，Web 页面的设计者都会倾向于在他们的页面设计稿中，为文字附加使用一些“特殊”的字体和特效，以此来展示他们卓越的设计能力。

如下图 1 所示，是某设计者为公司 A 所设计的一个公司简介页面（部分）。在其中为了突出公司的“亲和力”，设计者使用了一种名为 Baroque Script 的手写字体。

图 1. 设计者为网站所设计的公司简介效果图（部分）

无疑的这一设计将会让开发人员“抓狂”。因为与此同时，A 公司雇主明确的告诉了开发人员，公司简介的内容需要可以通过后台管理程序进行修改，并实时的显示到相应的页面上。

这也就意味着，即使开发人员可以如下代码所示通过编写脚本，来实时输出公司简介的内容，并指定这一内容使用“Baroque Script”字体进行显示，也是无法“完美”的实现设计初衷的。
清单 1. 无效的 font-family 字体指定

因为在大部分的浏览器上，并不会安装有 Baroque Script 字体。因此在这些浏览器上系统会主动“忽略”掉代码中关于 font-family 的说明，转而使用缺省字体进行输出，如下图 2 所示。
图 2. 在没有安装 Baroque Script 字体浏览器上的公司简介输出效果

当然随着 Web 标准的发展，关于这一问题现在也已经有了一个“官方”的解决方案，那就是通过 CSS3 标准下的 @font-face 属性来指定和引入非缺省字体，如下代码所示。
清单 2. 通过 @font-face 引入外部字体

完整的实现则可以参考范例 1.htm。显然的，这一解决方案会成为今后在此类问题上一个主流的处理方法。但是不幸的是，截止到目前为止其却并没有获得很多浏览器，尤其是 IE 系列浏览器的完整支持。而与之相较本文所将介绍的 Cufon 方案，目前在“普适性”上较 @font-face 方案则是要广泛许多，下表 1 则给出了二者在浏览器支持方面的一个比较，以供读者参考。

表 1. Cufon 和 @font-face 方案普适性比较一览表

那么面对这一冲突，Cufon 究竟是如何解决非缺省字体显示的问题的呢？

初涉 Cufon

引入 Cufon

作为一种基于 JavaScript 的网页字体引入方案， Cufon 的核心功能是通过一个名为“cufon-yui.js”的 JavaScript 类库，提供给开发人员的。因此使用 Cufon 技术的第一步，当然就是在 Web 页面中引入这一类库，如下代码所示。

清单 3. 引入 Cufon 核心库

创建并引入字体文件

这是使用 Cufon 技术的另一个关键所在。显然的对于初次接触 Cufon 技术的读者而言，这并不是一个容易理解的概念，那么什么是 Cufon 字体文件呢？

简言之 Cufon 字体文件，就是按照 Cufon 所提出的字体描述标准，创建形成的一种字体文件。

而和其他字体创建标准如 TrueType、OpenType 等不同的是，按照 Cufon 标准所形成的这一文件本身，就是一个标准的 JavaScript 脚本文件，这也就意味着其也可以通过 <script /> 标记引入到当前页面下，并交由 Cufon 类库进行解析和处理。

这真是一个“伟大”的创意！虽然其也面临着一个天然的障碍，那就是大部分的字体创建者并不会根据 Cufon 标准，来发布他们的字体文件。比如在上例中所使用的 Baroque Script 字体就是一种 TrueType 标准字体。因此显然的，如果我们希望某一字体可以为 Cufon 类库所处理，那么开发人员首先面临的问题，就是如何将使用其他标准描述的字体文件，转换为 Cufon 字体文件。这对大部分的开发人员而言当然是一个非常艰难的工作。

所幸的是 Cufon 已经为开发人员，准备了相应的在线工具 http://cufon.shoqolate.com/generate/，来实现这一转换过程。而目前工具所可以转换的字体标准则包括了 TrueType、FreeType2、OpenType、PostScript Font 等多种，应该说这几乎囊括了当前主流的一些字体创建标准，Cufon 的普适性由是可见一斑。

工具的使用其实并不复杂，笔者就不赘述了。以 Baroque Script 字体为例，在使用这一工具产生了相应的 Cufon 标准的字体文件“Baroque_Script_400.font.js”后，就可以通过如下代码所示的形式将其引入到 Web 页面中待用了。

清单 4. 引入 Cufon 字体文件

为标记附加 Cufon 转换

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

清单 5. 使用 Cufon.replace 方法对标记字体进行渲染

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

当然在更多的应用场合，我们可能还会需要对某一特定标记，进行字体的渲染。在这方面 Cufon.replace 方法也给予了较好的支持。下表 2 给出了方法所支持标记符写作规则及对应意义，以供读者根据实际情况进行选用。从中读者也不难发现，这一规范和 CSS 下选择符的书写语法是非常接近的。

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

至此这一简单的应用便开发完成了。完整的源代码读者可以参考范例 2.htm。将其部署到对应 Web 目录下，并在浏览器中进行查看，笔者相信读者是会得到如图 1 所示的显示效果的。

深入了解 Cufon API

当然真实的应用，并不会总如范例 2.htm 那么简单，为了更好的适应各种网页字体渲染的要求，Cufon 框架也提供了各种方法来辅助开发者实现其目标。下面笔者就择其一二，向读者进行一个简单的介绍。

CSS 增强

通过范例 2.htm 读者可以看到，Cufon 不仅能够针对标记文字进行字体的渲染，而且更为重要的是，这种渲染显然还参考了标记所对应的 CSS 风格 font-size，这对于实际的 Web 应用开发当然是非常重要的，也是 Cufon 技术的一个“特色”所在。

而与此同时，为了可以更为精确的控制在进行字体渲染时所使用的字体风格，Cufon 还提供了“配置项（Option）”这一概念，来帮助开发者直接在 Cufon 方法中指定相应字体风格值，如下表 3 所示。

表 3. Cufon 常用配置项和 CSS 风格名称对照表

而在 Cufon 中设定相关字体渲染配置项值的方法，则主要有以下两个。

通过 Cufon.set 方法设定相关配置项。

Cufon 类库提供有专门的 Cufon.set 方法，可用于指定当前所使用的配置项值，其语法规范可以如下代码所示。

清单 6. Cufon.set 语法规范

举例而言，针对范例 2.htm，如果我们希望在显示时相关文字的颜色为红色，那么我们就可以在调用 Cufon.replace 方法之前，通过 Cufon.set 首先对 color 配置项进行设置，如下代码所示，完整的实现则可以参考范例 3.htm。

清单 7. 使用 Cufon.set 改变所渲染文字的颜色

同时通过这一范例读者也可以了解到，显然的，在优先级上通过 Cufon.set 方法所设置的字体显示风格，是要高于使用 CSS 所设定的相应风格的。

在 Cufon.replace 方法中，直接设定相关的配置项值。

这也是非常简单的。如下代码所示是关于 Cufon.replace 方法的一个完整描述，从中读者可以看到，事实上在 Cufon.replace 方法内，配置项及其对应值可以通过一个 JSON 模式的 JavaScript 对象来提供，对此笔者就不再通过实例进行演示了。

而显然的在优先级上，由于其较 Cufon.set 方法更为接近所处理的标记实体，因此，在 Cufon.replace 方法中所指定的显示风格，将具有最高的处理优先级别，这也是毋庸置疑的。

清单 8. 完整的 Cufon.relace 语法规范

处理多种字体

关于缺省渲染字体

如果不通过 fontFamily 配置，进行指定，那么，cufon 将使用在顺序上，最后引入到系统的那个 cufon 字体文件所对应的字体，来对相关标记进行渲染。

这是 Cufon 应用的另一大特色。在同一个页面中，Cufon 可以为不同的标记对象，提供不同的字体渲染效果，这对于实际的 Web 应用而言，当然是非常常见的一个需求。

而 Cufon 对此功能的支持则仍然是通过配置项来完成的。在 Cufon 中开发着可以通过指定配置项“fontFamily”，来确定对应标记对象所需要使用的字体。

比如在范例 4.htm 中，除前例所使用的 Baroque Script 字体外，笔者还引入了另一个由 TrueType 字体 Whiteboard Modern Demo 所形成的 Cufon 字体文件 Modern_Demo_font.js，并分别用这两种字体，渲染了文档中 id 属性值为“id1”和“id2”的两个标记，如下代码所示。

清单 9. 使用不同的字体渲染标记

其产生的效果则可如下图 3 所示。

图 3. 在同一 Web 页面中使用多种字体进行渲染

细心的读者可能会从上图 3 中发现有这样一个问题，即在范例 4.htm 中，<h1 id="id2" /> 标记的文本应该是“It is a ID 2”，而并非如图所示的“It is a ID”，为什么会发生这样的情况呢？

要解释清楚这一问题其实并不困难，这牵涉到了 Cufon 在处理字符问题上的一个策略，即 Cufon 会“忽略”掉不存在于其字体文件中的字符。

比如在 Whiteboard Modern Demo 字体中，并没有包含针对字符“2”的书写方法，因此自然的当 Cufon 在使用这一字体显示字符时，如果遇到需要输出“2”的情形，其就会主动的将其“忽略”处理，这也就是为什么运行范例 4.htm，会出现如图 3 所示情形的原因所在。

而除此之外，Cufon 在处理字体问题时，还有另外的几项重要的策略和原则，在此一并列出，以供读者使用时参考。

首先，如果不指明所需要使用的字体，那么在使用 Cufon.replace 方法，对字体进行渲染时，系统将缺省使用最后引入的字体。

其次，Cufon 仅能够且仅允许处理使用 Cufon 字体文件描述的字体。

换言之，即使某一字体是所有系统中都携带的，但只要其没有通过 Cufon 所要求的方式进行引入，那么这种字体就不能在 Cufon 中使用，否则的话，Cufon 会因为引发错误而终止所有相关 JavaScript 脚本的执行。文后的 5.htm 给出了在这方面的一个范例，以供读者参考。

最后，使用 Cufon 渲染的标记将会覆盖对应标记下所有子标记的 font-family 属性，如范例 6.htm 所示。显然的这是符合在先前我们所提出的风格优先级原则的。