如何获取包含要由搜索引擎索引的文本的图像？

我正在为一个朋友建立一个小型投资组合网站，并且从事广告以及所有工作，她讨厌标准字体，并且希望所有内容都以自定义字体编写。

由于CSS字体嵌入目前还不是真正的选择，因此所有文本（幸运的是，它们的数量很少）将作为图像放置。

我如何仍可以索引图像内容？对于小文本（链接，菜单等），我将文本放在alt属性中，但对于更长的文本，我认为这不是解决方案。我能做什么 ？将文字放在图片旁边的隐藏div中？

嵌入字体！

不，但实际上，可嵌入字体可在所有当前浏览器（FF，Chrome，Safari，Opera）和IE5.5 +上使用（是的，自90年代以来一直在IE中使用。）

在此处获取您的TTF上传：http : //www.kirsle.net/wizards/ttf2eot.cgi

它会给您代码和2个文件（先是TTF，然后是EOT [M $网络字体]）。复制，粘贴，上传，完成。双赢！

而且请，请不要使用图片:)

但是，如果您这样做，则可以像不使用图像那样编写标记，然后将背景图像添加到所有元素中，并使用text-indent：-9999px隐藏文本。但是，请使用嵌入式字体。另外，如果您的客户/朋友是摄影师，那么她可能（不应该）使用古老的浏览器（我的意思是，真的很古老，例如IE4 ...）

除非她在该网站上出售自己的字体，否则我认为你们俩都可以在CSS嵌入上做更多的工作（是的，我读到现在这不是您的选择，但我坚持）。

如果情况是字体上的图形处理量较大（渐变颜色，扭曲的对齐方式，上光效果，浮雕效果，雕刻效果...），实际上无法根据需要呈现更多的CSS选项，那么我建议您执行以下操作：

通过CSS（可能是sprite）使用图片，并隐藏带有text-ident的锚文本。html

<a href="work1.html" title="My first work" id="firstWork">My first work</a>

的CSS

#firstWork {display: block; width: 200px; height: 150px; background-image:url('img/firstwork.jpg'); text-ident: -999em;}

这是一种技术。是的，我知道，Google可以对此进行惩罚，但您知道，我从未听说过有任何一个站点会因使用此方法而受到惩罚。

另一种方法是将锚标记ALONG内的img标签与文本一起使用，然后使用CSS隐藏文本并根据需要更正img的位置。最后一个选项使您可以在图像中添加alt，title，longdesc，从而增加索引的信息量和质量。

您甚至可以使用最后一个选项走得更远，并寻求更好，更新鲜的解决方案：使用可用于HTML5的图形标签以及figcaption。这个想法是保持锚->图-> img + figcaption。

Figcaption将充当锚文本角色，您可以使用CSS来隐藏它。

好吧，3解决方案。选一个。我会去的最后一个。

uck 她确实需要解决字体问题，因为这将杀死网站的可访问性，并导致所有其他类型的问题，例如放慢页面的呈现速度等等。

话虽如此，您可以尝试将longdesc属性添加到图像。很难说搜索引擎给予了多少重量（如果有的话），但是它可能大于零。

虽然现在所有主要浏览器中的Web字体都是非常标准的字体，但弄清楚不同字体格式的跨浏览器错综复杂性可能很棘手。

Google提供了一个不错的网络字体api和字体目录，以帮助您在这里找到有用的信息。

甚至将带有alt标签的图像用作访问网站其他页面的唯一方法，并不能真正为Google带来很大的清晰度。

最好的选择是说服您的朋友，您需要页面或站点上某处的文本链接才能解决问题。例如，如果您能够设置包含所有文本链接的站点地图页面，或者在每个页面上具有所有正常链接的下拉菜单。除了链接图像外，它不会造成任何损害。

我建议不要使用隐藏链接，因为Google可能认为这很有害，并降低了您网站的排名或将其标记为垃圾邮件。

正如其他人所建议的那样，您不必使用标准的“网络安全”字体。现在有许多可用的字体替换技术可以跨浏览器方式工作。要获得良好的概述，请查看：《 Web设计器字体替换方法指南》。您不必放弃SEO或使用图像SEO。您可以吃蛋糕也可以。

我曾经使用背景图片和隐藏的嵌套跨度来做到这一点。对文本浏览器和搜索引擎看起来很棒，并且具有用于更丰富浏览器的自定义字体。

HTML：

<h1><span>Welcome to Hell on Wheels</span></h1>

CSS：

h1 {
    background: url(welcome.gif) no-repeat;
    display: block;
    height: 68px;
    width: 415px;
}
h1 span { display: none; }

输出：

看到它在行动。

可以使用此方法替换的文本数量实际上没有限制（以明智的方式使用适当的标签和隐藏样式），但老实说，您的客户想要使用的自定义字体的可读性可能远低于所有常见的Web字体。你真的应该试着让她失望。

sFIR 可能为此目的而工作，但是使用它在客户端会占用大量资源，并且如果您需要在文本中嵌入链接，则可能会很棘手。

1. 只需使用webfonts即可。实际上，任何浏览器都可以正确显示它们（如果将它们放置为其他格式）。只需将它们作为常规文件托管（它们是）。这真的是很好的教程。另一优势：您无需思考如何欺骗Google

2. sIFR，Cufón，FLIR或其他图像精灵-这是真正的老式斗牛，出于未知原因而被发明;）请勿使用。

3. 在几个图像中键入了很多文本，它们是：

   • 加载时间长
   • 反搜索引擎优化（当然，您可以使用伪装并向Google bot和用户提供不同的内容，但这只是更多工作和测试，而且还有风险[竞争对手网站所有者可能会告诉您使用Google：]）

尝试使用typeface.js库！您可以通过在页面顶部包括库并为特殊字体元素提供特殊类来使用任何自定义TrueType或OpenType字体。它是免费的，开源的，跨平台的，搜索引擎也会看到您的文字。无需图像；该库可以处理所有这些，您只需像典型的网页一样进行设计即可。

这里有很多不错的选择，可以找到答案。似乎字体松鼠（http://www.fontsquirrel.com/fontface/generator）值得一提。是的，Google字体API也很棒。

至于图像替换，我个人建议在一个元素中使用一个跨度，以图像为跨度父级的背景。但是，不要在范围上显示：无，而要在屏幕上绝对显示它。这样，屏幕阅读器仍然可以获得该内容。

我似乎想起了从屏幕上移开以缩进赢得胜利的方法，但也许我穿上了笨拙的裤子。

但也要加倍-嵌入这些字体。

使用Font Squirrel中的一种Font-Face工具包。该工具包提供4种不同的字体格式以及使用它们所需的正确CSS。也可以在所有现代浏览器和旧版IE版本中使用！

用图像构建站点。然后在露水的几个月里，她回来抱怨引擎找不到它，用文字重新构建该网站并收取其他费用！