9

有许多部分的 HTML 页面，每个部分都有一个显示为图像的部分标题（使用漂亮的字体）。问题是，即使我在每个图像/标题上指定了“alt”和“title”文本，Ctrl+F浏览器功能也找不到文本。想到了两种可能的解决方案，但对它们不太满意

  1. 使用嵌入字体。问题：找不到客户需要使用的字体，也不确定版权。

  2. 将图像中的文本放在图像附近的 DIV 中，但从用户视图中隐藏。问题：搜索引擎可以考虑这个关键字堆砌吗？如果显示：无，浏览器会找到文本吗

有人有更好的解决方案吗？谢谢里加

4

5 回答 5

5

为什么不试试Google 字体目录

Google Font Directory 让您可以通过 Google Font API 浏览所有可用的字体。目录中的所有字体都可以在开源许可下在您的网站上使用，并由 Google 服务器提供服务。

于 2010-06-11T13:23:04.217 回答
2

为此，我使用了typeface.js Javascript 库

您可以使用此生成器为此库生成自定义字体

这些站点也有示例和使用说明。

于 2010-06-11T13:21:02.110 回答
2

通常，图像替换的最佳方法是仅在样式表中进行。

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-11T13:23:49.267 回答
1

您还可以在元素上使用 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-11T13:27:41.723 回答
0

嗯...我打算推荐Cufon作为使用生成图像的替代方法，但它并不完美：在 Firefox 中搜索工作但不太好（定位不好且没有突出显示）。

仍然比图片作为头条新闻要好得多。

于 2010-06-11T13:16:55.073 回答