使用Cufon技術實現Web自定義字體

在網頁設計中，設計師會在設計中加入一些特殊效果的字體以使得頁面更加美觀，然而訪問者的系統一般都是沒有安裝這些特殊字體的，所以使用font-family屬性來定義這些特殊字體是行不通的，于是人們想出了很多解決方案，今天要介紹的是其中之一的Cufon方案。

定義及基本原理

　　什么是Cufon呢？簡單的說，Cufon是一個用來替代sIFR（更早期的一種自定義字體實現方案）框架，實現在網頁中對文字字體進行渲染功能的純JavaScript開源類庫。其基本原理是借助于瀏覽器所推出的專有頁面繪畫方案，如 VML、Canvas 和 SVG 等，在網頁相關位置上“畫”出了所需要顯示的文字字符，并同時替換原先區域所需要顯示的文字。如果讀者所使用的瀏覽器恰好是Firefox的話，右鍵單擊經Cufon 渲染的文字，就可以發現這些文字可以按照圖片模式進行查看和存儲。

簡單范例

　　步驟一：引入Cufon核心庫

　　作為一種基于 JavaScript 的網頁字體引入方案， Cufon 的核心功能是通過一個名為“cufon-yui.js”的 JavaScript 類庫，提供給開發人員的。因此使用 Cufon 技術的第一步，當然就是在 Web 頁面中引入這一類庫。首先到Cufon網站下載類庫文件（最新版本是1.09i），如下圖所示：

　　代碼中引入Cufon庫，如下所示：

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

　　步驟二：創建和引入字體文件

　　這里說的字體文件是Cufon字體文件，這是使用 Cufon 技術的另一個關鍵所在。什么是 Cufon 字體文件呢？簡言之 Cufon 字體文件，就是按照 Cufon 所提出的字體描述標準，創建形成的一種字體文件。而和其他字體創建標準如 TrueType、OpenType 等不同的是，按照 Cufon 標準所形成的這一文件本身，就是一個標準的 JavaScript 腳本文件，并交由 Cufon 類庫進行解析和處理。

　　Cufon為開發人員準備了相應的在線工具，來實現這一轉換過程。而目前工具所可以轉換的字體標準則包括了 TrueType、FreeType2、OpenType、PostScript Font 等多種，應該說這幾乎囊括了當前主流的一些字體創建標準。工具的使用其實并不復雜，筆者就不贅述了。

　　以Denne Shuffle字體為例（更多創意字體可見20款非常有趣的高質量免費字體），在使用這一工具產生了相應的 Cufon 標準的字體文件“Denne_Shuffle_400.font.js”后，就可以通過如下代碼所示的形式將其引入到頁面中：

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

　　步驟三：應用Cufon渲染

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

<h1>Take me to your heart</h1>
<script type="text/javascript">
	Cufon.replace("h1");
	Cufon.set("fontSize","66px");
	Cufon.set("color","red");
</script>

　　而與此同時，為了可以更為精確的控制在進行字體渲染時所使用的字體風格，Cufon 還提供了“配置項（Option）”這一概念，來幫助開發者直接在 Cufon 方法中指定相應字體風格值，上述代碼后面兩項配置了字體大小為66像素，顏色是紅色，更多設置可見Cufon的官方文檔。

　　示例的完整代碼如下：

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Cufon</title>
<script type="text/javascript" src="js/cufon-yui.js"></script>
<script type="text/javascript" src="js/Denne_Shuffle_400.font.js"></script>
</head>
<h1>Take me to your heart</h1>
<script type="text/javascript">
	Cufon.replace("h1");
	Cufon.set("fontSize","66px");
	Cufon.set("color","red");
</script>
<body>
</body>
</html>

　　需要的朋友可以下載Demo，本示例最終效果如下：