使用圖像取代文字技巧製作網頁標題

製作中文網站的其中一個難題，是可以選用的中文字體極有限，正確地講，只可使用預設的字體，即 Windows 附帶的新細明體。新細明體的弊處是放大時鋸齒很明顯，當需要用較大字體製作網頁標題時，其效果之差，很多客戶都不會接受。

於是大部分網頁設計者都會使用圖像來製作標題，不過對於講求搜尋引擎優化效果來說，這方法令標題內只有圖像，不可放入關鍵字詞，而從講求語義網 (Semantic Web) 的角度看，沒有文字的標題亦是不可接受的事情。

其中一個解決的方法是使用 CSS 的圖像取代文字 (image replacement) 的技巧，令指定的圖像既有文字的網頁代碼，顯示時則用圖像取代。圖像取代文字技巧在5年前已有人提出，當中有很多不同的實行方法，《Nine Techniques for CSS Image Replacement》歸納了不同方法和其利弊。可以說沒有一個實行方式是十全十美的，個人認為大家使用時有幾點要注意：

• 在大部分的瀏覽器都可正確顯示
• 考慮網頁親和力，照顧要使用螢幕閱讀器的人士
• 應該只在網頁標題上使用此技巧，網站的選單如使用圖像製作，則可在網頁底部加入一個文字選單

基於以上考慮條件，Gilder/Levin Method 是一個最合適的方法，其實行方式如下：

示範

要注意的就是要加入一個空白的 span，及圖像不能有透明部分，而且要比文字長。

有人擔心使用圖像取代文字技巧，和搜尋器痛恨的隱藏文字優化方式有些類似，恐怕優化不成反被懲罰。Google 雖然沒有明文表態，不過大家可參考一下 《Image Replacement + Google》的解說，安心地使用這技巧。