如何使用瀏覽器控件在圖像中查找文本+ F

有許多部分的HTML頁面，每個部分的部分標題都顯示爲圖像（使用漂亮的字體）。問題是，即使我在每個圖像/標題上指定了「alt」和「title」文本，Ctrl + F瀏覽器功能也無法找到文本。認爲兩種可能的解決方案，但不是很高興他們如何使用瀏覽器控件在圖像中查找文本+ F

1）使用嵌入字體。問題：找不到客戶端需要使用的字體並且不確定版權。

2）將圖像中的文字放在圖像附近的DIV中，但隱藏在用戶視圖中。問題：搜索引擎可以考慮這個關鍵字填充嗎？如果顯示：瀏覽器是否會找到文本：無

有沒有人有更好的解決方案？感謝里加

來源

2010-06-11 Riga

要回答Q2。 CTRL-F不能用於隱藏'display：none'的div內的文本。 – 2010-06-11 13:18:29

瀏覽器無法搜索圖像中的文字。 'display：none'也不能解決你的問題。我建議只在需要它們的地方使用圖像。標題一定要用純文本書寫。 – hudolejev 2010-06-11 13:22:50

要回答Q2，您可以隱藏用戶視圖中的文本而不使用display：none; 。 Juste必須添加餘量：-9999; – 2010-06-11 13:25:20

通常情況下，圖像替換的最佳方法是在樣式表中完全實現。

的HTML仍然應該是這樣的：那麼

<h2 id="fantastic-section-of-awesomeness"><span>This is an Ordinary Heading</span></h2>

你的CSS可以這樣做：

h2#fantastic-section-of-awesomeness { 
    background: ...; /* The replacement image */ 
} 
h2 span { 
    text-indent: -100000px; 
}

注意，文本實際上沒有隱藏。某些屏幕閱讀器不正確地解釋display: none;（即使在media="screen"樣式表中給出）。相反，我們只是簡單地將它從屏幕的左側轉移到屏幕的左側，實際上看不到它。

我還沒有專門測試過Ctrl + F，但文本仍然在技術上可見的事實應該允許瀏覽器找到它。

它會不是能夠突出圖像作爲匹配，但是，這可能仍然會導致混淆。沒有使用@font-face沒有真正的方法。

來源

2010-06-11 13:23:49 VoteyDisciple

嗯...我要推薦Cufon作爲替代使用生成的圖像，但它並不完美：搜索在Firefox的作品，但不太好（壞的定位和沒有高亮）。

仍然比圖片更像標題。

來源

2010-06-11 13:16:55

要做到這一點，我已經使用這個generator

這些網站也有實例和使用說明使用這個庫中的typeface.js Javascript library

您可以生成自定義字體。

來源

2010-06-11 13:21:02 gruntled

嘗試Ctrl + F，但未找到文本 – Riga 2010-06-11 14:43:17

我正在查看其中的一些示例，但無法搜索。但我正在使用這個網站搜索工作正常。我會看看是否有一個特定的標誌。 – gruntled 2010-06-11 15:06:18

你使用哪種版本的字體庫？ – gruntled 2010-06-11 15:10:47

爲什麼不嘗試一下Google Font Directory

的谷歌字體目錄可以讓你瀏覽所有通過谷歌字體API提供的字體。目錄中的所有字體都可用於您的網站的開放源代碼許可證，並由Google 服務器提供服務。

來源

2010-06-11 13:23:04

我的客戶所需的字體不在Google提供的集合中。我的客戶不知道版權嘗試使用FFox 3.6並且所有字體看起來都一樣。 – Riga 2010-06-11 14:44:42

你也可以使用上的元素的z-index：使用戶只能看到圖像，但可以找到部分

<html> 
    <body> 
     ... 
     <div> 
      <div style="position:absolute; z-index: 1">My Section Header</div> 
      <div style="position:absolute; z-index: 2"><img src="test.png"/></div> 
     </div> 
     ... 
    </body> 
</html>

的圖像是在文本的前面，當他搜索「我的科頭」。

來源

2010-06-11 13:27:41

如何使用瀏覽器控件在圖像中查找文本+ F

回答

相關問題