使用 Cufon 渲染網頁字體教學

這是一篇關於 Cufon 技術的小文章。什麼是 Cufon 呢？簡單的說，Cufon 是一個用來替代 sIFR 框架，實現在網頁中對文字字體進行渲染功能的純 JavaScript 開源類庫。

為什麼要使用 Cufon

那麼為什麼要使用 Cufon 呢？這要從 Web 開發人員，所經常面對的一種「衝突」，即「字體（Font Family）衝突」開始講起。

通常的這一沖突總是爆發於 Web 頁面的設計者（Designer）和開發者（Coder）之間。在很多場合下，Web 頁面的設計者都會傾向於在他們的頁面設計稿中，為文字附加使用一些「特殊」的字體和特效，以此來展示他們卓越的設計能力。

如下圖 1 所示，是某設計者為公司 A 所設計的一個公司簡介頁面（部分）。在其中為了突出公司的「親和力」，設計者使用了一種名為 Baroque Script 的手寫字體。

無疑的這一設計將會讓開發人員「抓狂」。因為與此同時，A 公司僱主明確的告訴了開發人員，公司簡介的內容需要可以通過後台管理程序進行修改，並實時的顯示到相應的頁面上。

這也就意味著，即使開發人員可以如下代碼所示通過編寫腳本，來實時輸出公司簡介的內容，並指定這一內容使用「Baroque Script」字體進行顯示，也是無法「完美」的實現設計初衷的。

                               
 <style> 
  .introduction { font-family:'Baroque Script';} 
 </style> 
……
 <p class="introduction" style="font-size:36px"></p> 
 <p class="introduction" style="font-size:24px; text-align:right">
 <?php echo $leader;?></p> 

因為在大部分的瀏覽器上，並不會安裝有 Baroque Script 字體。因此在這些瀏覽器上系統會主動「忽略」掉代碼中關於 font-family 的說明，轉而使用缺省字體進行輸出，如下圖 2 所示。

當然隨著 Web 標準的發展，關於這一問題現在也已經有了一個「官方」的解決方案，那就是通過 CSS3 標準下的 @font-face 屬性來指定和引入非缺省字體，如下代碼所示。

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

完整的實現則可以參考範例 1.htm。顯然的，這一解決方案會成為今後在此類問題上一個主流的處理方法。但是不幸的是，截止到目前為止其卻並沒有獲得很多瀏覽器，尤其是 IE 系列瀏覽器的完整支持。而與之相較本文所將介紹的 Cufon 方案，目前在「普適性」上較 @font-face 方案則是要廣泛許多，下表 1 則給出了二者在瀏覽器支持方面的一個比較，以供讀者參考。

那麼面對這一沖突，Cufon 究竟是如何解決非缺省字體顯示的問題的呢？

初涉 Cufon

引入 Cufon

作為一種基於 JavaScript 的網頁字體引入方案， Cufon 的核心功能是通過一個名為「cufon-yui.js」的 JavaScript 類庫，提供給開發人員的。因此使用 Cufon 技術的第一步，當然就是在 Web 頁面中引入這一類庫，如下代碼所示。

                               
 <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 頁面中待用了。

                               
 <script src="Baroque_Script_400.font.js" type="text/javascript"></script> 

為標記附加 Cufon 轉換

在完成了上述的兩項準備工作後，事實上使用 Cufon 類庫來實現對字體的渲染是非常簡單的，這僅僅牽涉到了 Cufon 類庫所提供的一個核心方法，即 Cufon.replace 方法，如下代碼所示。

                               
 <script> 
 Cufon.replace('p');        
 </script> 

其中參數值「p」表示，在本例中 Cufon 將對整個 Web 頁面下所有 <p /> 標記對象下的文本，實施字體渲染處理。

當然在更多的應用場合，我們可能還會需要對某一特定標記，進行字體的渲染。在這方面 Cufon.replace 方法也給予了較好的支持。下表 2 給出了方法所支持標記符寫作規則及對應意義，以供讀者根據實際情況進行選用。從中讀者也不難發現，這一規範和 CSS 下選擇符的書寫語法是非常接近的。

至此這一簡單的應用便開發完成了。完整的源代碼讀者可以參考範例 2.htm。將其部署到對應 Web 目錄下，並在瀏覽器中進行查看，筆者相信讀者是會得到如圖 1 所示的顯示效果的。

深入瞭解 Cufon API

當然真實的應用，並不會總如範例 2.htm 那麼簡單，為了更好的適應各種網頁字體渲染的要求，Cufon 框架也提供了各種方法來輔助開發者實現其目標。下面筆者就擇其一二，向讀者進行一個簡單的介紹。

CSS 增強

通過範例 2.htm 讀者可以看到，Cufon 不僅能夠針對標記文字進行字體的渲染，而且更為重要的是，這種渲染顯然還參考了標記所對應的 CSS 風格 font-size，這對於實際的 Web 應用開發當然是非常重要的，也是 Cufon 技術的一個「特色」所在。

而與此同時，為了可以更為精確的控制在進行字體渲染時所使用的字體風格，Cufon 還提供了「配置項（Option）」這一概念，來幫助開發者直接在 Cufon 方法中指定相應字體風格值，如下表 3 所示。

而在 Cufon 中設定相關字體渲染配置項值的方法，則主要有以下兩個。

1. 通過 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 所設定的相應風格的。

2. 在 Cufon.replace 方法中，直接設定相關的配置項值。

   這也是非常簡單的。如下代碼所示是關於 Cufon.replace 方法的一個完整描述，從中讀者可以看到，事實上在 Cufon.replace 方法內，配置項及其對應值可以通過一個 JSON 模式的 JavaScript 對象來提供，對此筆者就不再通過實例進行演示了。

   而顯然的在優先級上，由於其較 Cufon.set 方法更為接近所處理的標記實體，因此，在 Cufon.replace 方法中所指定的顯示風格，將具有最高的處理優先級別，這也是毋庸置疑的。

   
   
   清單 8. 完整的 Cufon.relace 語法規範
   

   Cufon.replace("選擇符", {"配置項 1" : 值 , "配置項 2": 值 , …… });

處理多種字體

這是 Cufon 應用的另一大特色。在同一個頁面中，Cufon 可以為不同的標記對象，提供不同的字體渲染效果，這對於實際的 Web 應用而言，當然是非常常見的一個需求。

而 Cufon 對此功能的支持則仍然是通過配置項來完成的。在 Cufon 中開發著可以通過指定配置項「fontFamily」，來確定對應標記對象所需要使用的字體。

比如在範例 4.htm 中，除前例所使用的 Baroque Script 字體外，筆者還引入了另一個由 TrueType 字體 Whiteboard Modern Demo 所形成的 Cufon 字體文件 Modern_Demo_font.js，並分別用這兩種字體，渲染了文檔中 id 屬性值為「id1」和「id2」的兩個標記，如下代碼所示。

                               
 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 所示。顯然的這是符合在先前我們所提出的風格優先級原則的。

Cufon 實現原理初探及應用

通過上文的介紹和演示，讀者對於 Cufon 所展現出來的魔力以及在應用中的相關注意事項，應該是有了一個大致的瞭解了。那麼 Cufon 是如何實現這一魔法的呢？

事實上如果讀者所使用的瀏覽器恰好 Firefox 的話，那麼當運行前述 Cufon 範例時，瀏覽器的表現其實是會「洩露」Cufon 的秘密所在的。如下圖 4 所示，在 Firefox 瀏覽器上，如果讀者使用鼠標右鍵，單擊經 Cufon 渲染的文字，就可以發現這些文字，現在「竟然」已經可以按照圖片模式進行查看和存儲了。

這無疑暗示了，Cufon 技術的實現策略其實就是以一定標準，在網頁相關位置上「畫」出了所需要顯示的文字字符，並同時替換原先區域所需要顯示的文字。

而這自然就牽涉到了一個非常重要的問題，即如何「直接」在網頁上實現「作畫」呢？總體來看目前業界比較成熟的方案，有以下 三種。

• 使用 Java Applet 進行繪畫。
• 通過 ActionScript 語言在 Flash 內進行繪畫。
• 借助於瀏覽器所推出的專有頁面繪畫方案，如 VML、Canvas 和 SVG 等，來進行頁面的繪畫。通常的，這些方案又都和瀏覽器 DOM 對象以及 JavaScript 語言緊密相關。

Cufon 使用的正是上述第三種解決方案。當然囿於篇幅所限，筆者是無法向讀者盡述 Cufon 使用這一方案，實現字體渲染的種種細節的。在此筆者則將通過另外一個實例，即構建統一的 Web 統計圖表引擎實例，來幫助讀者瞭解 Cufon 框架背後所隱藏的這一技術要點。在筆者看來，雖然這兩個應用在目標上大相逕庭，但其改採用的基本策略和方法則是非常類似的。

準備描述規範

和 Cufon 的設計者在開發之初，為 Cufon 準備 Cufon 字體文件描述規範類似，我們開發 Web 統計圖表引擎的第一步，也為 Web 統計圖表準備相應的描述規範。以二維餅圖為例，這一規範可能會被表述為如下所示的形式。

• 首先，每一個餅圖將被描述為一個 JavaScript 數組，數組的每一個元素則代表了餅圖中的一個扇區。
• 其次，數組的每一個元素將被組織為一個 JSON 對象。而在這一對象中將包含有兩個基本的屬性，即「color」屬性和「percent」屬性，前者指明了對應扇區所使用的渲染色，後者則表示扇區在整個餅圖中所佔的百分比。

而根據這一規範所形成的一個餅圖描述範例，則可如下代碼所示。

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

至於其他的統計圖表，當然也是可以如上所述整理形成相關的描述規範的，這部分工作將作為一個練習，供有興趣的讀者補充完成並實現，在此筆者就不多加贅述了。

提供繪製接口

在制定了相關圖表的繪製規範後，下面要做的則是和 Cufon 一樣，向其他開發人員提供統計圖表繪製的方法，以幫助他們在實際應用中實現相關圖像的繪製。

在此我們不妨將整個繪製接口對象命名為 StatisticalGraph，繪製方法命名為 draw，如下代碼所示。

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

其中，相關參數的基本含義可如下表 4 所示。

使用 Canvas 繪製統計圖

在規定了整個應用接口後，我們就將使用 VML、Canvas、SVG 等 Web 頁面圖形繪畫方案，來實現統計圖表的繪畫了。在此之前則不妨來首先瞭解一下，這些方案在瀏覽器應用環境上的差別，如下表 5 所示。

顯然的對於統計圖表的繪畫應用而言，使用 VML+Canvas 聯合的方案是一個具有最大普適性的策略，而這事實上也正是 Cufon 改採用的圖形繪畫的解決方案。

仍然以餅圖繪製為例。由這一策略出發，讀者是不難理解如下代碼所示的繪製基本業務邏輯的。

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

那麼如何來實現代碼中所給出的兩個繪製接口 _drawVMLPie 和 _drawCanvasPie 呢？在此，我們則不妨從 _drawCanvasPie 的一些實現細節開始起，來逐步的瞭解在這一過程中，所普遍適用的一些開發原則和技巧。

瞭解 Canvas

首先需要簡單的介紹一下 Canvas 本身，這實際上是一個由 HTML 5 標準所正式支持的 HTML 標記。因此，對於支持 Canvas 標記的瀏覽器而言，使用 Canvas 標記和使用其他傳統 HTML 標記是沒有任何不同的。

而在 HTML 5 中，一個 Canvas 標記所代表的就是一個獨立的繪畫區間。而一般的我們則將這一繪畫區間稱之為「畫布」。

確立坐標系

顯然的對於所有繪圖而言，在畫布上確立坐標系，都應該是整個繪圖工作的第一步，Canvas 自然也不例外。而與傳統意義上的二維平面坐標系不同，Canvas 坐標系的縱軸方向是自上而下的，缺省則將使用畫布的左上角置為整個坐標系的（0,0）原點。

據此並根據前述說明，讀者是不難完成如下代碼所示的 Canvas 畫布創建代碼的，在此 Options 配置項「width」和「height」所代表的，則分別是整個畫布的寬度和高度。

                               
 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」表明在此處將使用二維平面模式進行繪畫。

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

繪畫並填充扇形區域

那麼，我們又該如何使用畫筆對象，進行統計圖表如餅圖的繪畫呢？從幾何學角度來講每個餅圖其實都是由若干個扇形所組成的，所以餅圖繪畫的核心，其實也就在於每一個扇形的作畫上。而對於 Canvas 而言以下兩點則是需要讀者特別瞭解的。

• 首先，Canvas 提供了點、線（包括弧線），以及閉合直線圖形、圓（包括橢圓）的繪製方法，但對於其他非規則圖形，如扇形等，Canvas 並沒提供直接支持。
• 其次，Canvas 允許對任意一個閉合區間，使用顏色進行填充和邊界繪製。

當然，結合一定的數學知識，尤其是三角函數知識，筆者相信這一問題其實並不難解決。為方便起見，筆者在此將通過代碼註解的方式，向讀者來介紹在這一過程中的一些關鍵所在，以供讀者參考。

清單 15. 繪畫並填充扇形

var dot_x = canvas.width / 2 ; // 設定圓心位置的 x 坐標，置於整個畫布的中央，下同
var dot_y = canvas.height/ 2 ; // 設定圓心位置的y坐標                  
 // 設定半徑，在此，去掉 20 的目的，是為了使得整個餅圖，可以比畫布看上去小些
 var radius = (Math.min(canvas.width,canvas.height) - 20)/2; 
 var startAngel = 0; // 起始角度
 var start_x = dot_x + radius; var start_y = dot_y; // 設定起始扇形底邊所在遠端坐標
 for(i=0; i<data.length; i++){ 
  // 在 Canvas 下開始一次繪畫過程，至 closePath 結束
 //Canvas 允許對一次繪畫過程所形成的封閉區域，進行統一的顏色填充
  brash.beginPath(); 
  // 計算扇形中止弧度，Canvas 使用弧度作為單位
  var endAngel =  startAngel + Math.PI*2*data[i]['percent']/100; 
  // 設定扇形另一邊所在遠端點坐標
 var end_x = dot_x + radius * Math.cos(endAngel); 
 var end_y = dot_x + radius * Math.sin(endAngel); 
 brash.moveTo(dot_x, dot_y); // 將畫筆移動至圓心
 // 畫扇形的兩條邊，lineTo 表示在 MoveTo 所設定的起點，至 lineTo 所設定終點間畫線
 brash.lineTo(start_x, start_y); 
 brash.lineTo(end_x, end_y); 
 // 使用 arc 方法繪畫弧形，其中，false 表明在此，將按照逆時針方式進行繪畫
 brash.arc(dot_x, dot_y, radius, startAngel, endAngel, false); 
 startAngel = endAngel; start_x = end_x; start_y = end_y; 
 brash.closePath(); // 結束本次繪畫過程
 brash.fillStyle = data[i]['color']; // 設定填充顏色
 brash.fill(); // 使用畫筆刷填充由最近繪畫過程所形成的圖形
 } 

完整的代碼實現讀者可以參閱範例 7.htm，代碼的運行效果，則可如下圖 5 所示。

至此 Canvas 下的餅圖顯示引擎就已基本開發完成了。當然根據應用的需要，我們還可以繼續擴展這一引擎，比如在範例 8.htm 中，筆者就在現有引擎基礎上，增加了兩個扇形區域數據描述屬性 offset_x 和 offset_y 屬性，來分別表示該扇形區域的水平和垂直偏移量，而應用這一新引擎所產生的執行效果，則可如下圖 6 所示。顯然的對於某些需要突出顯示某個區域的餅圖統計圖表而言，這將是很好的一種表達方式。

使用 VML 繪製統計圖

在瞭解了 Canvas 下繪製統計圖的主要方法和技巧後，再去理解同樣的功能在 VML 下的實現，顯然將要順暢許多。有鑑於此，我在此就不對其實現細節和流程進行說明了，而僅將就這一開發中的幾個關鍵開發點略作提示，以供讀者參考。

• VML 是一種基於 XML 的繪畫標記語言。這是 VML 和 Canvas 最大的不同之處。

在 VML 規範下，任意的一個普通 HTML 標記，都可以視為 VML 下的一個獨立的 「畫布」而存在，而 VML 語言則相當於是 Canvas 的畫筆對象，可以為這一畫布提供各種各樣的繪畫方式。比如，我們可以使用 <line /> 標記來實現從坐標（0,0）到（100,0）的直線段的繪畫，如下代碼所示。

                               
 <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 風格說明的原因所在。

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

其餘的開發技巧，應該說就和 Canvas 對象無異了，讀者可參閱範例 7.htm 進行瞭解，在此筆者就不多贅述了。而在餅圖引擎的基礎上，筆者相信，讀者也是一定可以完成其他統計圖表的引擎開發工作的。

至此，關於 Cufon 及其基本實現原理便已經向讀者介紹完畢了。而顯然的由於 Cufon 引擎的實現原理，就是將文字描述轉化為圖形，那麼在相關算法的支持下，我們是一定能夠在 Cufon 的基礎上，實現關於文字的更為豐富的渲染的。而事實上 Cufon 也已經開始了這方面的工作。比如利用現有的 Cufon 類庫，開發者就可以通過為 Cufon.replace 方法，配置一個特殊的 color 配置項值「-linear-gradient( 顏色 1, 顏色 2, … , 顏色 n)」，來實現文字的顏色從顏色 1 到顏色 n 的漸變。筆者相信，隨著 Cufon 的不斷發展，類似這樣的渲染實現是會越來越多的，而筆者也歡迎對此有興趣的讀者，來我一起來進行有關的研究和探討。

下載

關於下載方法的信息

參考資料

• sIFR 是一個較早出現的，對網頁文字字體問題進行處理的解決方案，和 Cufon 不同，這一解決方案是基於 Flash 技術來實現的，有興趣的讀者可以通過地址 http://www.mikeindustries.com/blog/sifr/來瞭解這一解決方案。
  
• 可通過 http://cufon.shoqolate.com/js/cufon-yui.js獲得當前穩定版本的 Cufon 類庫，本文所使用的則是其 1.03 版本。同時整個類庫，在發佈時，還使用了 JavaScript 代碼壓縮工具 yuicompressor 進行壓縮，對此有興趣的讀者，則可以通過 http://developer.yahoo.com/yui/compressor/來瞭解並下載使用這一代碼壓縮工具。
  
• 關於 Cufon 的完整 API 參考，讀者可見 http://wiki.github.com/sorccu/cufon/api。
  
• 一個最新的方案是通過 Silverlight 來實現繪畫，這是由 Microsoft 所提出的一個和 Flash 競爭的方案，讀者可以通過 http://msdn.microsoft.com/zh-cn/library/bb190632.aspx來瞭解相關的技術細節。
  
• 整個 StatisticalGraph 對象實現使用了 JavaScript 中的「閉包」技巧來避免遭受名稱污染，關於閉包的一個較為完整的描述可參見文章《 閉包的概念、形式與應用》。
  
• 關於 Canvas 標記及其腳本的基本寫作方法，讀者可以自行參考 https://developer.mozilla.org/en/Canvas_tutorial處的說明。
  
• 一個關於 VML 開發規範的說明可以參見 http://www.w3.org/TR/NOTE-VML.html。
  
• 在 http://www.w3.org/Graphics/SVG/處有關於 SVG 標準的詳細說明，以供讀者參考。
  
• developerWorks 技術活動和網絡廣播：隨時關注 developerWorks 技術活動和網絡廣播。
  
• developerWorks Web development 專區：通過專門關於 Web 技術的文章和教程，擴展您在網站開發方面的技能。
  

關於作者