很久以前若要設計有字型樣式的文字，會用圖片來替代文字，但自從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/index.html

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/

更多範例：http://wiki.github.com/sorccu/cufon/demos

優點：

• 預先轉換字型檔，把解讀的工作交給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/

碎碎念一下：

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

今天把小綠人製成Flash loading元素以供直接套用：

仿照交通號誌的效果，剛開始會走比較慢，後面會走比較快

使用方式：

我已經把loading所需的ActionScript寫進去了，因此只需複製元件到目的文件即可。

1. 打開小綠人flash原始檔。
2. 開啟「元件庫面板」，找到名為「loading」的影片片段(MovieClip)，按下滑鼠右鍵 >> 複製。
3. 切換到你的flash原始檔中。
4. 開啟「元件庫面板」，按下滑鼠右鍵 >> 貼上(Flash會一併複製其他所需元件過去)。
5. 新增一個場景（此場景可命名為loading），並排在第一順位。
6. 把loading影片片段拉到新增的場景中。
7. 完成，現在你的flash擁有小綠人loading提示功能了。

PS. loading的ActionScript我使用AS3.0的語法。

小綠人Flash loading元素原始檔下載

Open Flash Chart 顧名思義，是以Flash開發用以產生圖表的元件，而且它是一個Open Source Project，提供各種Web開發語言以簡易的方式產生出複雜的圖表呈現，雖然介面上在同類型元件中並不是最漂亮的，但擁有足夠的自訂性，在操作上也相當簡易，應付大部分的需求應該是綽綽有餘了。

Open Flash Chart 目前提供以下幾種常見的Web開發語言或工具的Library讓使用者可以直接用最熟悉的方式簡易的產生出各種圖表。

1. PHP
2. Perl
3. Python
4. ASP.Net
5. Java
6. Google Webtoolkit

整體的使用概念很簡單

1. 產生一段Flash的HTML Code將Open Flash Chart顯示在網頁中(官方教學採用SWFObject來做這件事情)並設定其data-file的param值，好讓Open Flash Chart去讀取圖表資料。
2. 用你熟悉的語言產生出JSON格式圖表所需資料(官方提供各種語言的Library來做這件事情)，亦可直接編輯JSON格式的data-file檔。
3. 如果需要動態切換資料亦可使用Javascript來達成動態切換圖表資料的目的，當然也可以搭配AJAX來動態取得圖表資料。

詳盡的說明請參閱官方的教學文件：http://teethgrinder.co.uk/open-flash-chart-2/tutorial.php

Open Flash Chart 官方網站：http://teethgrinder.co.uk/open-flash-chart-2/