使用 Cufon 渲染网页字体-1 为什么要使用 Cufon

look_w

这是一篇关于 Cufon 技术的小文章。什么是 Cufon 呢？简单的说，Cufon 是一个用来替代 sIFR 框架，实现在网页中对文字字体进行渲染功能的纯 JavaScript 开源类库。
为什么要使用 Cufon那么为什么要使用 Cufon 呢？这要从 Web 开发人员，所经常面对的一种“冲突”，即“字体（Font Family）冲突”开始讲起。
通常的这一冲突总是爆发于 Web 页面的设计者（Designer）和开发者（Coder）之间。在很多场合下，Web 页面的设计者都会倾向于在他们的页面设计稿中，为文字附加使用一些“特殊”的字体和特效，以此来展示他们卓越的设计能力。
如下图 1 所示，是某设计者为公司 A 所设计的一个公司简介页面（部分）。在其中为了突出公司的“亲和力”，设计者使用了一种名为 Baroque Script 的手写字体。
无疑的这一设计将会让开发人员“抓狂”。因为与此同时，A 公司雇主明确的告诉了开发人员，公司简介的内容需要可以通过后台管理程序进行修改，并实时的显示到相应的页面上。
这也就意味着，即使开发人员可以如下代码所示通过编写脚本，来实时输出公司简介的内容，并指定这一内容使用“Baroque Script”字体进行显示，也是无法“完美”的实现设计初衷的。
清单 1. 无效的 font-family 字体指定

1 2 3 4 5 6 7

<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 属性来指定和引入非缺省字体，如下代码所示。
清单 2. 通过 @font-face 引入外部字体

1 2 3 4 5 6

…… @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 究竟是如何解决非缺省字体显示的问题的呢？