电子技术论坛_中国专业的电子工程师学习交流社区-中电网技术论坛

标题: 使用 Cufon 渲染网页字体-3 深入了解 Cufon API [打印本页]

作者: look_w 时间: 2018-8-23 20:42 标题: 使用 Cufon 渲染网页字体-3 深入了解 Cufon API

深入了解 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 语法规范
1
Cufon.set("配置项名称", 配置项值 )

举例而言，针对范例 2.htm，如果我们希望在显示时相关文字的颜色为红色，那么我们就可以在调用 Cufon.replace 方法之前，通过 Cufon.set 首先对 color 配置项进行设置，如下代码所示，完整的实现则可以参考范例 3.htm。
清单 7. 使用 Cufon.set 改变所渲染文字的颜色
1
2
3
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 语法规范
1
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. 使用不同的字体渲染标记

1 2	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 所示。显然的这是符合在先前我们所提出的风格优先级原则的。

欢迎光临电子技术论坛_中国专业的电子工程师学习交流社区-中电网技术论坛 (http://bbs.eccn.com/)