当前位置:爱推吧 » Div+CSS » 使用 Cufon 渲染网页字体

使用 Cufon 渲染网页字体

简介: 本文介绍了使用 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 字体指定

                                     <style>  .introduction { font-family:'Baroque Script';}

</style>

……

<p style="font-size:36px"><?php echo $introduction; ?></p>

<p style="font-size:24px; text-align:right">

<?php echo $leader;?></p>

 

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

 

 

当然随着 Web 标准的发展,关于这一问题现在也已经有了一个“官方”的解决方案,那就是通过 CSS3 标准下的 @font-face 属性来指定和引入非缺省字体,如下代码所示。
清单 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、FreeType2、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. 在同一 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 所示。显然的这是符合在先前我们所提出的风格优先级原则的。

 

发表评论

电子邮件地址不会被公开。 必填项已用*标注