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

#1 楼

嵌入字体！

不，但实际上，可嵌入字体可在当前所有浏览器（FF，Chrome，Safari，Opera）和IE5.5 +（自90年代开始在IE中使用）上运行。 ）

将您的TTF上传到此处：
http://www.kirsle.net/wizards/ttf2eot.cgi

它将为您提供代码并返回2个文件（先是TTF，然后是EOT [M $网络字体]）。复制，粘贴，上传，完成。双赢！

请，请不要使用图像:)

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

#2 楼

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

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

通过CSS（可能是精灵）使用图像，并隐藏带有文本标识的锚文本。
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，标题，longdesc，从而增加索引的信息量和质量。

您甚至可以进一步使用此最后一个选项，从而获得更好的效果。全新解决方案：使用Figure标签（可用于HTML5）和figcaption。想法是保持锚点->图-> img + figcaption。

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

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

#3 楼

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

说了可以尝试在图像中添加longdesc属性。很难说搜索引擎给了它多少重量（如果有的话），但是它可能比零还多。

#4 楼

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

Google提供了一个不错的网络字体api和字体目录来帮助您您可能会发现有用。

#5 楼

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

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

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

#6 楼

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

#7 楼

我曾经使用背景图片和隐藏的嵌套跨度来做到这一点。

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字体低。你真的应该试着说服她。

#8 楼

sFIR可能可以实现此目的，但是使用它在客户端会占用大量资源，并且如果需要在文本中嵌入链接，可能会变得很棘手。

#9 楼

只使用webfonts。实际上，任何浏览器都可以正确显示它们（如果将它们放置为其他格式）。只需将它们作为常规文件托管（它们就是）。这真的是一个很好的教程。另一个优势：您无需思考如何欺骗google
sIFR，Cufón，FLIR或其他图像精灵-这是真正的老式斗牛，它是出于未知原因发明的；）

在几个图像中键入很多文本是：


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

#10 楼

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

#11 楼

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

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

我似乎想起了退出屏幕以赢得缩进的机会，但也许我穿上了傻裤子。

但是加倍也可以-嵌入这些字体。

#12 楼

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

#13 楼

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