|
步驟三：應(yīng)用Cufon渲染
在完成了上述的兩項準(zhǔn)備工作后，使用 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>
而與此同時，為了可以更為精確的控制在進(jìn)行字體渲染時所使用的字體風(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，本示例最終效果如下：
優(yōu)缺點及兼容性
優(yōu)點：
- 比siFR技術(shù)簡單100倍
- 速度快，瞬間執(zhí)行
- 不依賴于服務(wù)器端語言
缺點：
- 依賴于JavaScript
- 文本無法被選中
- 無法實現(xiàn)懸停變換效果
Cufon技術(shù)在主流瀏覽器中的兼容性情況如下表所示：
 5+  1.5+  1.0+  3.0+  9.5+
總結(jié)
總的來說，這種實現(xiàn)自定義字體的方案還是比較簡單的，雖然有些不足，但也是一種兼容性相對比較好的方案，個人覺得將來CSS3的@font-face更有可能成為實現(xiàn)網(wǎng)頁自定義字體的主要方法。
參考文章：
- 使用 Cufon 渲染網(wǎng)頁字體
- The Easiest Way to Use Any Font You Wish
原文：http://www.cnblogs.com/lhb25
本文鏈接：http://www.95time.cn/tech/web/2011/8307.asp 
出處：博客園
責(zé)任編輯：bluehearts
上一頁 使用Cufon技術(shù)實現(xiàn)Web自定義字體 [1] 下一頁
◎進(jìn)入論壇網(wǎng)頁制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評論。
|
第 1 頁 
第 2 頁 使用Cufon技術(shù)實現(xiàn)Web自定義字體 [2]
