您現(xiàn)在的位置： 365建站網(wǎng) > 365文章 > 使用Cufon技術(shù)實現(xiàn)Web自定義字體

使用Cufon技術(shù)實現(xiàn)Web自定義字體

文章來源：365jz.com 點擊數(shù)：485 更新時間：2011-02-21 09:22 參與評論

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

定義及基本原理

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

簡單范例

　　步驟一：引入Cufon核心庫

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

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

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

　　步驟二：創(chuàng)建和引入字體文件

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

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

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

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

　　步驟三：應(yīng)用Cufon渲染

　　在完成了上述的兩項準備工作后，使用 Cufon 類庫來實現(xiàn)對字體的渲染是非常簡單的，這僅僅牽涉到了 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>

　　而與此同時，為了可以更為精確的控制在進行字體渲染時所使用的字體風(fēng)格，Cufon 還提供了“配置項（Option）”這一概念，來幫助開發(fā)者直接在 Cufon 方法中指定相應(yīng)字體風(fēng)格值，上述代碼后面兩項配置了字體大小為66像素，顏色是紅色，更多設(shè)置可見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，本示例最終效果如下：