網頁使用特殊字型的解決方案

Posted in 十二月 15th, 2009 by 阿育 | Filed under Web開發 | Comments (4)

字型的兼容對於網頁設計而言是一個很頭痛的問題，如果在網頁中使用特殊字型，而訪客的電腦中沒有安裝這個字型，將會因為無法正確顯示字型而導致網頁的設計走味。因此一般在設計網頁的時候只能選擇通用的字型，如：Verdana, Geneva, sans-serif,Georgia這些芭樂到不行的字型，結果是可能會讓外觀大打折扣。

很久以前若要設計有字型樣式的文字，會用圖片來替代文字，但自從SEO觀念盛行之後，這個方法便不那麼恰當了，因為縱然使用alt或title屬性來加強描述也不是很被搜尋引擎建議的方法。

因為終極目標是除了外觀要美也要符合SEO的原則，所以目前最佳的解決之道便是「以純文字設計」，並於顯示時「替換為圖片、Flash或其他方式」。

為了解決這個困擾，曾經出現過很多不同的解決方案，在此介紹幾種已知的方法，每個方法各有利弊，實際應用時可以依照情況斟酌著使用。

1.CSS技巧 – Image Replacement

利用CSS耍點花招將文字隱藏，並以background屬性顯示圖片，來達到替換文字為「具有字體樣式的文字型圖片」效果，要將文字隱藏方法有很多，其中一個較簡便的方法就是利用text-indent將文字「縮」到看不見的地方。

#title{
	background: url(text.gif) no-repeat left top;
	width: 150px;
	height: 40px;
}

#title span{
	text-indent: -9999px;
}


	
文字

缺點：

如果想替換的地方很多的話，只能慢慢做到天荒地老、海枯石爛….。
只能於設計階段手工製作，如果是動態產生的內容則無法使用這個方法。

優點：

不論是Client端或Server端都不需消耗額外的效能與資源（因為在設計階段，已經用設計人員的腦力與耐性抵消掉了…）

2. sIFR – Scalable Inman Flash Replacement

Flash所產生的SWF播放檔可以內嵌字體，sIFR就是利用這個特性，動態的以Javascript將文字用SWF元素替代，來達到呈現特殊字型的效果。

範例：

http://dev.novemberborn.net/sifr3/svn/test/distribution/demo/

相關網址：

官方網站：http://wiki.novemberborn.net/sifr/

sIFR3：http://novemberborn.net/sifr3

缺點：

內嵌中文字型將造成SWF非常肥大。

優點：

輕鬆簡單，Server端無需耗費額外硬體資源，Client端耗用資源幾乎可以忽略不計。

3. jQuery Flash Plugin – sIFR

sIFR功能是這個jQuery Plugin的其中一個功能，一樣也是利用SWF播放檔可以內嵌字體的特性來達成替代文字的效果。

http://jquery.lukelutman.com/plugins/flash/example-text-replacement.html

範例：

http://jquery.lukelutman.com/plugins/flash/example-text-replacement.html

優缺點同sIFR。

4. cufon

這是相當有趣的一項技術，它提供一個產生器(PHP寫的)，能將字型檔案TrueType (TTF), OpenType (OTF), Printer Font Binary (PFB)，轉換為一個Javascript格式的字型檔(或者可以說它是一個javascript的字型定義檔)，再即時的利用javascript透過canvas 與 VML，動態於網頁中繪出字體，並取代對應的網頁元素。

相關網址：

http://cufon.shoqolate.com/generate/

http://wiki.github.com/sorccu/cufon

範例：

http://www.acidsmile.co.uk/

優點：

預先轉換字型檔，把解讀的工作交給Client端，可節省Server的資源耗用。

缺點：

中文字型產生的檔案太大了！字型檔是用MB計算的。
IE6與IE7這兩個市佔率最高的大老不支援，IE8才支援。

5. facelift

使用PHP在Server端產生對應的圖片，並於前端用javascript替換對應的HTML元素。

http://facelift.mawhorter.net/

優點：

以圖片達成，因此沒有瀏覽器顯示支援的問題，也不需安裝任何Plugin(Flash是一種Plugin)。
訪客瀏覽時只需下載特換過的特殊字型圖片，沒有中文字型過大的問題。

缺點：

Server端的loading比較重，但它具有cache可以抵消掉很多負擔。
Server必須能執行PHP。

範例：

http://facelift.mawhorter.net/examples/

碎碎念一下：

中文的博大精深為我們奠定了深厚的文化基礎，但中文的繁雜在印刷術發明後已經吃過一次虧，現在又吃了一記悶棍，簡體字也仍然保留缺點，真可謂成也蕭何敗也蕭何啊！

Tagged : CSS, Flash, javascript, php, 網頁設計

你可能會感興趣