在網頁設計中，設計師會在設計中加入一些特殊效果的字型以使得頁面更加美觀，然而通路者的系統一般都是沒有安裝這些特殊字型的，是以使用font-family屬性來定義這些特殊字型是行不通的，于是人們想出了很多解決方案，今天要介紹的是其中之一的Cufon方案。
什麼是Cufon呢？簡單的說，Cufon是一個用來替代sIFR（更早期的一種自定義字型實作方案）架構，實作在網頁中對文字字型進行渲染功能的純JavaScript開源類庫。其基本原理是借助于浏覽器所推出的專有頁面繪畫方案，如 VML、Canvas 和 SVG 等，在網頁相關位置上“畫”出了所需要顯示的文字字元，并同時替換原先區域所需要顯示的文字。如果讀者所使用的浏覽器恰好是Firefox的話，右鍵單擊經Cufon 渲染的文字，就可以發現這些文字可以按照圖檔模式進行檢視和存儲。
代碼中引入Cufon庫，如下所示：
這裡說的字型檔案是Cufon字型檔案，這是使用 Cufon 技術的另一個關鍵所在。什麼是 Cufon 字型檔案呢？簡言之 Cufon 字型檔案，就是按照 Cufon 所提出的字型描述标準，建立形成的一種字型檔案。而和其他字型建立标準如 TrueType、OpenType 等不同的是，按照 Cufon 标準所形成的這一檔案本身，就是一個标準的 JavaScript 腳本檔案，并交由 Cufon 類庫進行解析和處理。
在完成了上述的兩項準備工作後，使用 Cufon 類庫來實作對字型的渲染是非常簡單的，這僅僅牽涉到了 Cufon 類庫所提供的一個核心方法，即 Cufon.replace 方法，如下代碼所示：
示例的完整代碼如下：
1.比siFR技術簡單100倍
2.速度快，瞬間執行
3.不依賴于伺服器端語言
1.依賴于JavaScript
2.文本無法被選中
3.無法實作懸停變換效果
Cufon技術在主流浏覽器中的相容性情況如下表所示：
5+
1.5+
1.0+
3.0+
9.5+
總的來說，這種實作自定義字型的方案還是比較簡單的，雖然有些不足，但也是一種相容性相對比較好的方案，個人覺得将來CSS3的@font-face更有可能成為實作網頁自定義字型的主要方法。
參考文章：
相關文章：
<a target="_blank" href="http://www.cnblogs.com/lhb25/p/must-read-links-for-web-designers-and-developers-volume-12.html">Web 前端工程師和設計師必讀精華文章推薦</a>
<a href="http://www.cnblogs.com/lhb25//lhb25/archive/2011/07/28/html5-awesome-single-page-sites-inspiration.html" target="_blank">酷！15個精美的 HTML5 單頁網站作品欣賞</a>
<a target="_blank" href="http://www.cnblogs.com/lhb25//lhb25/archive/2011/11/22/best-awesome-css3-animation-demos.html">炫！35個讓人驚訝的 CSS3 動畫效果示範</a>
<a href="http://www.cnblogs.com/lhb25//lhb25/archive/2012/03/02/30-mind-blowing-parallax-scrolling-effect-websites.html" target="_blank">贊！30個與衆不同的優秀視差滾動效果網站</a>
<a target="_blank" href="http://www.cnblogs.com/lhb25//lhb25/archive/2012/01/13/25-outstanding-single-page-website-designs.html">靓å！25個優秀的國外單頁網站設計作品欣賞</a>
<a target="_blank" href="http://www.cnblogs.com/lhb25//lhb25/archive/2011/08/09/awesome-html5-and-javascript-effects.html">帥！8個驚豔的 HTML5 和 JavaScript 特效</a>
<a href="http://www.cnblogs.com/lhb25//lhb25/archive/2011/06/27/35-exclusive-rainbow-colored-flash-websites.html" target="_blank">頂！35個很漂亮的國外 Flash 網站作品欣賞</a>
<a href="http://www.cnblogs.com/lhb25//lhb25/archive/2011/08/24/outstanding-admin-panels-part-one.html" target="_blank">哇！34個漂亮網站和應用程式背景管理界面</a>
<a href="http://www.yyyweb.com/go/web" target="_blank">本部落格新站點 ◆ 前端裡 ◆ 歡迎圍觀：）</a>
歡迎任何形式的轉載，但請務必注明出處。