沐鳴代理_使用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,本示例最終效果如下:

優缺點及兼容性

  優點:

1.比siFR技術簡單100倍

2.速度快,瞬間執行

3.不依賴於服務器端語言

  缺點:

1.依賴於JavaScript

2.文本無法被選中

3.無法實現懸停變換效果

Cufon技術在主流瀏覽器中的兼容性情況如下錶所示:

5+ 1.5+ 1.0+ 3.0+ 9.5+

總結

總的來說,這種實現自定義字體的方案還是比較簡單的,雖然有些不足,但也是一種兼容性相對比較好的方案,個人覺得將來CSS3的@font-face更有可能成為實現網頁自定義字體的主要方法。