使用 Cufon 渲染网页字体-2 初涉 Cufon

look_w

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

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

创建并引入字体文件
这是使用 Cufon 技术的另一个关键所在。显然的对于初次接触 Cufon 技术的读者而言，这并不是一个容易理解的概念，那么什么是 Cufon 字体文件呢？
简言之 Cufon 字体文件，就是按照 Cufon 所提出的字体描述标准，创建形成的一种字体文件。
而和其他字体创建标准如 TrueType、OpenType 等不同的是，按照 Cufon 标准所形成的这一文件本身，就是一个标准的 JavaScript 脚本文件，这也就意味着其也可以通过 <script /> 标记引入到当前页面下，并交由 Cufon 类库进行解析和处理。
这真是一个“伟大”的创意！虽然其也面临着一个天然的障碍，那就是大部分的字体创建者并不会根据 Cufon 标准，来发布他们的字体文件。比如在上例中所使用的 Baroque Script 字体就是一种 TrueType 标准字体。因此显然的，如果我们希望某一字体可以为 Cufon 类库所处理，那么开发人员首先面临的问题，就是如何将使用其他标准描述的字体文件，转换为 Cufon 字体文件。这对大部分的开发人员而言当然是一个非常艰难的工作。
所幸的是 Cufon 已经为开发人员，准备了相应的在线工具 ，来实现这一转换过程。而目前工具所可以转换的字体标准则包括了 TrueType、FreeType2、OpenType、PostScript Font 等多种，应该说这几乎囊括了当前主流的一些字体创建标准，Cufon 的普适性由是可见一斑。
工具的使用其实并不复杂，笔者就不赘述了。以 Baroque Script 字体为例，在使用这一工具产生了相应的 Cufon 标准的字体文件“Baroque_Script_400.font.js”后，就可以通过如下代码所示的形式将其引入到 Web 页面中待用了。
清单 4. 引入 Cufon 字体文件

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

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

1 2 3

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

其中参数值“p”表示，在本例中 Cufon 将对整个 Web 页面下所有 <p /> 标记对象下的文本，实施字体渲染处理。
当然在更多的应用场合，我们可能还会需要对某一特定标记，进行字体的渲染。在这方面 Cufon.replace 方法也给予了较好的支持。下表 2 给出了方法所支持标记符写作规则及对应意义，以供读者根据实际情况进行选用。从中读者也不难发现，这一规范和 CSS 下选择符的书写语法是非常接近的。
表 2. Cufon.replace 方法选择符参数值语法规范（部分）语法说明 value 渲染所有以 value 为名称的标记下文本 #value 渲染以 value 为标记的 id 属性值的标记下文本 .value 渲染所有 class 属性值为 value 的标记下文本选择符联合可以使用的联合符有空格（“ ”），大于号（“>”）等，相关含义则可参考 CSS 选择符联合的相关说明
至此这一简单的应用便开发完成了。完整的源代码读者可以参考范例 2.htm。将其部署到对应 Web 目录下，并在浏览器中进行查看，笔者相信读者是会得到如图 1 所示的显示效果的。