使用 Cufon 渲染网页字体
这是一篇关于 Cufon 技术的小文章。什么是 Cufon 呢？简单的说，Cufon 是一个用来替代 sIFR 框架，实如今网页中对文字字体进行渲染功能的纯 JavaScript 开源类库。javascript
为何要使用 Cufon
那么为何要使用 Cufon 呢？这要从 Web 开发人员，所常常面对的一种“冲突”，即“字体（Font Family）冲突”开始讲起。php
一般的这一冲突老是爆发于 Web 页面的设计者（Designer）和开发者（Coder）之间。在不少场合下，Web 页面的设计者都会倾向于在他们的页面设计稿中，为文字附加使用一些“特殊”的字体和特效，以此来展现他们卓越的设计能力。java
以下图 1 所示，是某设计者为公司 A 所设计的一个公司简介页面（部分）。在其中为了突出公司的“亲和力”，设计者使用了一种名为 Baroque Script 的手写字体。web
无疑的这一设计将会让开发人员“抓狂”。由于与此同时，A 公司雇主明确的告诉了开发人员，公司简介的内容须要能够经过后台管理程序进行修改，并实时的显示到相应的页面上。浏览器
这也就意味着，即便开发人员能够以下代码所示经过编写脚本，来实时输出公司简介的内容，并指定这一内容使用“Baroque Script”字体进行显示，也是没法“完美”的实现设计初衷的。app
清单 1. 无效的 font-family 字体指定
<style>
.introduction { font-family:'Baroque Script';}
</style>
……
<p class="introduction" style="font-size:36px"><?php echo $introduction; ?></p>
<p class="introduction" style="font-size:24px; text-align:right">
<?php echo $leader;?></p>
由于在大部分的浏览器上，并不会安装有 Baroque Script 字体。所以在这些浏览器上系统会主动“忽略”掉代码中关于 font-family 的说明，转而使用缺省字体进行输出，以下图 2 所示。框架
固然随着 Web 标准的发展，关于这一问题如今也已经有了一个“官方”的解决方案，那就是经过 CSS3 标准下的 @font-face 属性来指定和引入非缺省字体，以下代码所示。jsp
清单 2. 经过 @font-face 引入外部字体
……
@font-face {
font-family: "Baroque Script";
src: url('BaroqueScript.ttf')
}
……
完整的实现则能够参考范例 1.htm。显然的，这一解决方案会成为从此在此类问题上一个主流的处理方法。可是不幸的是，截止到目前为止其却并无得到不少浏览器，尤为是 IE 系列浏览器的完整支持。而与之相较本文所将介绍的 Cufon 方案，目前在“普适性”上较 @font-face 方案则是要普遍许多，下表 1 则给出了两者在浏览器支持方面的一个比较，以供读者参考。工具
表 1. Cufon 和 @font-face 方案普适性比较一览表
| 所支持浏览器 | |
|---|---|
| Cufon | IE（≥ 5） Firefox（≥ 1.5）Opera（≥ 9.5）Safari（≥ 3）Google Chrome（≥ 1.0） |
| @font-face | IE（≥ 4，仅支持 OpenType）Firefox（≥ 3.5） Opera（≥ 10.0） Safari（≥ 3.1） |
那么面对这一冲突，Cufon 到底是如何解决非缺省字体显示的问题的呢？字体
初涉 Cufon
引入 Cufon
做为一种基于 JavaScript 的网页字体引入方案， Cufon 的核心功能是经过一个名为“cufon-yui.js”的 JavaScript 类库，提供给开发人员的。所以使用 Cufon 技术的第一步，固然就是在 Web 页面中引入这一类库，以下代码所示。
清单 3. 引入 Cufon 核心库
<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 已经为开发人员，准备了相应的在线工具 http://cufon.shoqolate.com/generate/，来实现这一转换过程。而目前工具所能够转换的字体标准则包括了 TrueType、FreeType二、OpenType、PostScript Font 等多种，应该说这几乎囊括了当前主流的一些字体建立标准，Cufon 的普适性由是可见一斑。
工具的使用其实并不复杂，笔者就不赘述了。以 Baroque Script 字体为例，在使用这一工具产生了相应的 Cufon 标准的字体文件“Baroque_Script_400.font.js”后，就能够经过以下代码所示的形式将其引入到 Web 页面中待用了。
清单 4. 引入 Cufon 字体文件
<script src="Baroque_Script_400.font.js" type="text/javascript"></script>
为标记附加 Cufon 转换
在完成了上述的两项准备工做后，事实上使用 Cufon 类库来实现对字体的渲染是很是简单的，这仅仅牵涉到了 Cufon 类库所提供的一个核心方法，即 Cufon.replace 方法，以下代码所示。
清单 5. 使用 Cufon.replace 方法对标记字体进行渲染
<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 所示的显示效果的。
深刻了解 Cufon API
固然真实的应用，并不会总如范例 2.htm 那么简单，为了更好的适应各类网页字体渲染的要求，Cufon 框架也提供了各类方法来辅助开发者实现其目标。下面笔者就择其一二，向读者进行一个简单的介绍。
CSS 加强
经过范例 2.htm 读者能够看到，Cufon 不只可以针对标记文字进行字体的渲染，并且更为重要的是，这种渲染显然还参考了标记所对应的 CSS 风格 font-size，这对于实际的 Web 应用开发固然是很是重要的，也是 Cufon 技术的一个“特点”所在。
而与此同时，为了能够更为精确的控制在进行字体渲染时所使用的字体风格，Cufon 还提供了“配置项（Option）”这一律念，来帮助开发者直接在 Cufon 方法中指定相应字体风格值，以下表 3 所示。
表 3. Cufon 经常使用配置项和 CSS 风格名称对照表
| Cufon 配置项 | 对应 CSS 风格 | 备注 |
|---|---|---|
| color | color | |
| fontSize | font-size | 在 Cufon 配置项下使用时，仅容许使用 px 做为风格的单位 |
| fontStyle | font-style | |
| fontWeight | font-weight | |
| fontStretch | font-stretch | CSS3 风格，仅容许经过 cufon 配置项进行使用，若是在 CSS 文件中指定，则会被部分浏览器视为无效而忽略 |
| letterSpacing | letter-spacing | |
| textTransform | text-transform |
而在 Cufon 中设定相关字体渲染配置项值的方法，则主要有如下两个。
经过 Cufon.set 方法设定相关配置项。
Cufon 类库提供有专门的 Cufon.set 方法，可用于指定当前所使用的配置项值，其语法规范能够以下代码所示。
清单 6. Cufon.set 语法规范
Cufon.set("配置项名称", 配置项值 )举例而言，针对范例 2.htm，若是咱们但愿在显示时相关文字的颜色为红色，那么咱们就能够在调用 Cufon.replace 方法以前，经过 Cufon.set 首先对 color 配置项进行设置，以下代码所示，完整的实现则能够参考范例 3.htm。
清单 7. 使用 Cufon.set 改变所渲染文字的颜色
Cufon.set("color", "#FF0000"); …… <p style="font-size:36px; color:green">This is the company's introduction</p>同时经过这一范例读者也能够了解到，显然的，在优先级上经过 Cufon.set 方法所设置的字体显示风格，是要高于使用 CSS 所设定的相应风格的。
在 Cufon.replace 方法中，直接设定相关的配置项值。
这也是很是简单的。以下代码所示是关于 Cufon.replace 方法的一个完整描述，从中读者能够看到，事实上在 Cufon.replace 方法内，配置项及其对应值能够经过一个 JSON 模式的 JavaScript 对象来提供，对此笔者就再也不经过实例进行演示了。
而显然的在优先级上，因为其较 Cufon.set 方法更为接近所处理的标记实体，所以，在 Cufon.replace 方法中所指定的显示风格，将具备最高的处理优先级别，这也是毋庸置疑的。
清单 8. 完整的 Cufon.relace 语法规范
Cufon.replace("选择符", {"配置项 1" : 值 , "配置项 2": 值 , …… });
处理多种字体
关于缺省渲染字体
若是不经过 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. 使用不一样的字体渲染标记
Cufon.replace("#id1", {fontFamily : "Baroque Script"});
Cufon.replace("#id2", {fontFamily : "Whiteboard Modern Demo"});
其产生的效果则可以下图 3 所示。
细心的读者可能会从上图 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 所示。显然的这是符合在先前咱们所提出的风格优先级原则的。
下载
| 描述 | 名字 | 大小 |
|---|---|---|
| 实例代码 | src.zip | 140KB |