使用 Cufon 渲染網頁字體

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

爲何要使用 Cufon

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

一般的這一衝突老是爆發於 Web 頁面的設計者（Designer）和開發者（Coder）之間。在不少場合下，Web 頁面的設計者都會傾向於在他們的頁面設計稿中，爲文字附加使用一些「特殊」的字體和特效，以此來展現他們卓越的設計能力。

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

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

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

清單 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 的說明，轉而使用缺省字體進行輸出，以下圖 2 所示。

固然隨着 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、FreeType二、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 中設定相關字體渲染配置項值的方法，則主要有如下兩個。

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": 值 , …… });

處理多種字體

關於缺省渲染字體

若是不經過 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 中發現有這樣一個問題，即在範例 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 所示。顯然的這是符合在先前咱們所提出的風格優先級原則的。

下載

描述	名字	大小
實例代碼	src.zip	140KB