搜尋

隨機推薦

使用 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.