text-indent:-9999px 字體隱藏問題

    為什么要字體隱藏？

    通常為了傳達更好的視覺效果，我們常用圖片替代掉字體。但是為了html語義化，常常要給內容模塊加上一些標題來讓頁面更有意義，在拋開css裸奔的情況下也能很順利的汲取到頁面信息。為此我們需將圖片上的字體隱藏。

    另外，建站過過程中朋友喜歡把網站名稱用H1表示,但從美觀考慮，要用logo圖片來代替h1，這時需要隱藏h1內的這段文字，但又不能對搜索引擎不友好，否則就失去了定義h1標簽的意義。

 

  1）一般來說，偏移掉字體的方式是使用：text-indent:-9999px; （注意：只能用於block，table cells和inline-block）

    text-indent:-9999px；的具體使用方法：把h1作為一個塊來顯示（display:block;），指定長寬（和圖片一樣大小），然后指定h1的背景圖片，也就是將我們需要的圖片作為h1這個 標簽的背景。而h1標簽中插入的，仍然是作為字符形式出現的博客標題，然后用text-indent:-9999px;將文字甩到屏幕看不到的地 方。（9999px應該是足夠了，誰的屏幕也沒那么大吧）

  如：

<h1>
　　<a href=“http://www.seo100.net/”>博客園</a>
</h1>

 

在CSS文件中：（注意：將h1轉化成block的話，他身后的的元素就被他趕到下一行了。如果正好這個h1后面，是一個按鈕，就要用float來浮動以使他身后再出現簇擁者）

h1 a{ 　　height:30px; 　　width:165px; 　　float:left; 　　text-indent:-9999px; 　　background-image:url(images/logo.gif); 　　background-repeat:no-repeat; 　　display:block; 　　position:relative;
　　}

 

    在h1使用上語義明確，符合語義化定義。text-indent就是首行縮進，大家都在中文段落，首行空兩格用過它。這里通過負值縮進，使文字 超出可視區，而這時h1下的背景就顯示出來了，h1中包含的<a>標簽又不影響使用，對於隱藏文字“站點名稱”應該是最佳方案了。但對於多段 文字的隱藏這個方法就不適合了。

   另外，點擊<h1><a>鏈接時，會產生一個虛線框，對於IE還好，沒什么問題，虛線框只是在背影圖片大小。但是Firefox就有些麻煩，它把縮進的文字范圍也包含進來了，這樣不是很美觀。

    於是需要屏掉點擊時產生的虛線框，IE和FF屏虛線框方法不一樣。IE采用的遍歷方法(HTC,css表達式)有些耗系統資源，正好我們只需要隱藏FF下的虛線框就行了，IE就不管了，說一下Firefox如何去掉鏈接的虛線框的方法。

 

a{ 　　outline:none;
　}

 

outline是css3的一個屬性，用的很少。聲明，這是個不能兼容的css屬性，在ie6、ie7、遨游瀏覽器都不兼容。只有ff,ie8在加了outline:none后會取消聚焦的虛線框。



2）使用overflow:hidden;完美隱藏background之上的字體
line-height:0;

font-size:0;
overflow:hidden;


或 (不大適合用在h1標簽上）

.text-hidden { 　　display:block; 　　overflow:hidden; 　　width:0; 　　height:0;
　　}

 

3）還有另外2種方法，不推薦使用。

   1、display:none;

　　這個大家普遍說法是，搜索引擎可能認為被隱藏的文字屬於垃圾信息而被忽略，不為隱藏的對象保留物理占位空間。GG也搜CSS文件？不過如果用這個方法，<h1>如何設計，也是難題。　　

　2、visibility:hidden;

　　和display:none;相對應，為隱藏的對象保留物理占位空間。