2009/03/21

CSS 飛兒

CSS 飛兒(CSS FIR:Fahrner Image Replacement)討論的是用背景圖取代文字的方法。由於電腦作業系統提供的字型有限,有時候需要用到又酷又炫的字,這時只能用美工軟體作成圖片,然後將圖片放在網頁上。下例中的文字就是用背景圖取代。

用背景圖取代文字有一個缺點,搜尋引擎只能搜尋文字,不能搜尋圖片中的文字。所以 Todd Fahrner 提出在其中加上文字,但是設為 display:none。下例中增加了 SPAN 中的文字,並且設為 display:none。這樣搜尋引擎就可以找到 "CSS FIR" 字串了。

上述方法也有一個缺點,大部分盲人使用的螢幕閱讀機,不會讀出設為 dislay:none 或 visibility:hidden 的文字,所以上法就被淘汰了。之後也有人 提出各種方法,此處我們只示範 Gilder/Levin 法。此法將背景圖放在 SPAN,而文字接在 SPAN 之後,這樣盲人閱讀機就可以讀出文字了。如果拿掉背景圖,還會顯示文字。此法只有一個小缺點,如果背景圖用到透明色(transparent),則文字會顯示出來。