转 Cufon在渲染网页字体你不知道的事

清单 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 的说明，转而使用缺省字体进行输出

图 1. 设计者为网站所设计的公司简介效果图（部分）

最初的设计初衷想法。

图 2. 在没有安装 Baroque Script 字体浏览器上的公司简介输出效果

结果却是不堪入目。

清单 2. 通过 @font-face 引入外部字体

…… @font-face { font-family: "Baroque Script"; src: url('BaroqueScript.ttf') } ……

清单 3. 引入 Cufon 核心库

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

 

清单 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> 

清单 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> 



清单 8. 完整的 Cufon.relace 语法规范

				
 Cufon.replace("选择符", {"配置项 1" : 值 , "配置项 2": 值 , …… }); 

关于缺省渲染字体

如果不通过 fontFamily 配置，进行指定，那么，cufon 将使用在顺序上，最后引入到系统的那个 cufon 字体文件所对应的字体，来对相关标记进行渲染。

这是 Cufon 应用的另一大特色。在同一个页面中，Cufon 可以为不同的标记对象，提供不同的字体渲染效果，这对于实际的 Web 应用而言，当然是非常常见的一个需求。

而 Cufon 对此功能的支持则仍然是通过配置项来完成的。在 Cufon 中开发着可以通过指定配置项“fontFamily”，来确定对应标记对象所需要使用的字体。

清单 9. 使用不同的字体渲染标记

				
 Cufon.replace("#id1", {fontFamily : "Baroque Script"}); 
 Cufon.replace("#id2", {fontFamily : "Whiteboard Modern Demo"}); 

清单 10. 饼图描述实例

				
 var pie = [ 
  {"color" : "red", "percent" : 20}, 
  {"color" : "green", "percent" : 40}, 
  {"color" : "blue", "percent" : 40} 
 ]; 

清单 11. 接口对象声明

				
 var StatisticalGraph = (function(){ 
 this.draw = function(data, type, dest, options){ 
……
 }; 
  ……
  return this; 
 })(); 

清单 12. 饼图绘画接口

				
……
 case "pie": 
  return (isIE)?_drawVMLPie(data, dest, options):_drawCanvasPie(data, dest, options); 
 break; 
……



清单 13. 创建 Canvas 绘画区域

				
 var canvas = document.createElement('canvas'); 
 canvas.width = (options['width'])?options['width']:100; 
 canvas.height = (options['height'])?options['height']:100; 
 dest.appendChild(canvas); 

创建画笔对象

在创建了 Canvas 对象后，我们并不能直接在 Canvas 画布上进心绘画，而是需要通过创建一个一个画笔对象，才能够实现在 Canvas 画布上的绘画。这一画笔对象的创建方法也非常简单，如下代码所示，其中，“2d”表明在此处将使用二维平面模式进行绘画。

清单 14. 创建画笔

				
 var brash = canvas.getContext('2d'); 

绘画并填充扇形区域

那么，我们又该如何使用画笔对象，进行统计图表如饼图的绘画呢？从几何学角度来讲每个饼图其实都是由若干个扇形所组成的，所以饼图绘画的核心，其实也就在于每一个扇形的作画上。而对于 Canvas 而言以下两点则是需要读者特别了解的。

• 首先，Canvas 提供了点、线（包括弧线），以及闭合直线图形、圆（包括椭圆）的绘制方法，但对于其他非规则图形，如扇形等，Canvas 并没提供直接支持。
• 其次，Canvas 允许对任意一个闭合区间，使用颜色进行填充和边界绘制。

当然，结合一定的数学知识，尤其是三角函数知识，笔者相信这一问题其实并不难解决。为方便起见，笔者在此将通过代码注解的方式，向读者来介绍在这一过程中的一些关键所在，以供读者参考。

清单 15. 绘画并填充扇形

清单 16. VML 基本应用范例

				
 <p> 
  <v:line from="0,0" to="100,0" /> 
 </p> 

 

因此，在 VML 下动态创建图形的过程，其实也就是动态创建 VML 语言标记并将其附加到画布（即某一标记）下的过程，这二者是完全一致的。

• behavior 风格的使用。

这是 VML 应用另外一个与众不同之处。在 VML 的规范中，开发者如果希望使用 VML 技术来进行页面的绘画，则不仅仅需要如一般 XML 语言一样，在 Web 文档中引入这一语言的名称空间（VML 的名称空间为“urn:schemas-microsoft-com:vml”），还需要确保所有 VML 标记，具有值为“url(#default#VML)”的 behavior 风格。否则的话，IE 浏览器是不会对其进行解析和处理的。这也正是读者可以在大部分 VML 应用中，看到有类似如下代码所示的 CSS 风格说明的原因所在。

清单 17. 需要为标记增加 behavior 风格，才能为 IE 解析

				
 <!--[if IE]> 
 <style>cvml:* { behavior: url(#default#VML); }</style> 
 <![endif]-->