搜尋

隨機推薦

30 十一月 2009
07 二月 2011

使用 Cufon 渲染網頁字體教學

這是一篇關於 Cufon 技術的小文章。什麼是 Cufon 呢?簡單的說,Cufon 是一個用來替代 sIFR 框架,實現在網頁中對文字字體進行渲染功能的純 JavaScript 開源類庫。

為什麼要使用 Cufon

那麼為什麼要使用 Cufon 呢?這要從 Web 開發人員,所經常面對的一種「衝突」,即「字體(Font Family)衝突」開始講起。

通常的這一沖突總是爆發於 Web 頁面的設計者(Designer)和開發者(Coder)之間。在很多場合下,Web 頁面的設計者都會傾向於在他們的頁面設計稿中,為文字附加使用一些「特殊」的字體和特效,以此來展示他們卓越的設計能力。

如下圖 1 所示,是某設計者為公司 A 所設計的一個公司簡介頁面(部分)。在其中為了突出公

廣告

司的「親和力」,設計者使用了一種名為 Baroque Script 的手寫字體。


圖 1. 設計者為網站所設計的公司簡介效果圖(部分)
图 1. 设计者为网站所设计的公司简介效果图(部分)

無疑的這一設計將會讓開發人員「抓狂」。因為與此同時,A 公司僱主明確的告訴了開發人員,公司簡介的內容需要可以通過後台管理程序進行修改,並實時的顯示到相應的頁面上。

這也就意味著,即使開發人員可以如下代碼所示通過編寫腳本,來實時輸出公司簡介的內容,並指定這一內容使用「Baroque Script」字體進行顯示,也是無法「完美」的實現設計初衷的。


清單 1. 無效的 font-family 字體指定
                               
<style>
.introduction { font-family:'Baroque Script';}
</style>
……
<p class="introduction" style="font-size:36px"></p>
<p class="introduction" style="font-size:24px; text-align:right">
<?php echo $leader;?></p>

因為在大部分的瀏覽器上,並不會安裝有 Baroque Script 字體。因此在這些瀏覽器上系統會主動「忽略」掉代碼中關於 font-family 的說明,轉而使用缺省字體進行輸出,如下圖 2 所示。


圖 2. 在沒有安裝 Baroque Script 字體瀏覽器上的公司簡介輸出效果
图 2. 在没有安装 Baroque Script 字体浏览器上的公司简介输出效果

當然隨著 Web 標準的發展,關於這一問題現在也已經有了一個「官方」的解決方案,那就是通過 CSS3 標準下的 @font-face 屬性來指定和引入非缺省字體,如下代碼所示。


清單 2. 通過 @font-face 引入外部字體
                               
……
@font-face {
font-family: "Baroque Script";
src: url('BaroqueScript.ttf')
}
……

完整的實現則可以參考範例 1.htm。顯然的,這一解決方案會成為今後在此類問題上一個主流的處理方法。但是不幸的是,截止到目前為止其卻並沒有獲得很多瀏覽器,尤其是 IE 系列瀏覽器的完整支持。而與之相較本文所將介紹的 Cufon 方案,目前在「普適性」上較 @font-face 方案則是要廣泛許多,下表 1 則給出了二者在瀏覽器支持方面的一個比較,以供讀者參考。


表 1. Cufon 和 @font-face 方案普適性比較一覽表

所支持瀏覽器
Cufon IE(≧ 5) Firefox(≧ 1.5)Opera(≧ 9.5)Safari(≧ 3)Google Chrome(≧ 1.0)
@font-face IE(≧ 4,僅支持 OpenType)Firefox(≧ 3.5) Opera(≧ 10.0) Safari(≧ 3.1)

那麼面對這一沖突,Cufon 究竟是如何解決非缺省字體顯示的問題的呢?


 

廣告

无觅相关文章插件,快速提升流量

Please publish modules in offcanvas position.