简介：Web 设计师很早就开始使用图像文本显示特殊的字体、脚本，或其他无法在用户电脑上显示的字体。通过基于图像的文本，而不是用户的系统字体，Web 设计师能够很好地控制颜色、字距、线条粗细和字体。然而，如果页面上没有实际的文本，Google 和 Yahoo 等搜索引擎，以及 Google Ads 等广告服务，将在识别站点和对站点进行分类时受到阻碍。本文将解释如何使基于图像的文本变得美观优雅，而且不损害文本在 Web 页面上的语义。
文本依赖于用户的系统，而不是您的系统
Web 的最大好处之一是能够将消息 — 以 Web 页面的形式 — 发送给成千上万的用户系统。您可以对消息进行一番 “打扮”，然后通过一个诱人的 Web 页面将它展示在全球各地的计算机面前。当然，Web 的最大缺点 之一就是您必须同时面对成千上万个用户系统。您会受到他们的软件、操作系统、显示器大小甚至是左右手使用习惯的限制。
事实上，这正是 HTML、CSS、XHTML、ECMAScript、JavaScript 等正在着手解决的问题。通过发布一组标准，您可以合理构建页面，确定您的家人、朋友、客户或其他网络使用者可以访问的内容，以及您自己可以访问的内容。构 建一个表或某种样式的字体来突出重点已经不是什么稀奇的事情。但是，虽然 Web 标准已经取得很大的进展，但仍有许多 东西尚未 标准化。
大多数用户都有自己的小型字体集
在用户的系统上，最不 可靠的便是字体。首先语言本身存在大量无法克服的问题。一般情况下，日本的计算机很可能没有您喜欢的英语书法字体。尽管您认为您的站点仅由使用相同母语的 计算机浏览，但它们也存在大量的字体风格。如果您从事与设计相关的工作，则很可能向计算机自带的标准字体集添加了其他一些字体。
但事实上，大多数用户都不是设计师。他们不是程序员、作家，甚至从事与计算机毫无相关的工作。这意味着您需要处理常见的字体，比如 Arial 或经久不衰的 Times Roman（如果是比较高级的系统，还可能是 Times New Roman）。这里指出了一个常被忽略的事实：虽然您正在阅读 IBM developerWorks 上的文章，但您使用的字体和大多数计算机用户不一样。别指望用户机器当中有 “相当比例的机器” 使用与您相同的字体。
这得出一个明显的结论，那就是在 Web 站点中使用的字体受到巨大的限制。 如果您的 Web 页面使用极为不常见的字体，那就会带来困惑、招来抱怨，或使用户沉默不语，因为用户决不会承认他们看过或理解您的站点。因为用户看到的很可能是难看的，甚 至是很难辨认的字体，而不是您所选择的字体。他们的文本可能不再适合屏幕，或超出了边框。因为当您选择的字体不可用时，大多数情况下用户系统会调节到对他们 的系统可用的最简单（通常最烦人、最难看）的字体。
这些字体不是绝对可靠的
另外，即使您和用户使用相同的字体集，它们之间也会存在一些差别。在 Microsoft®Windows 的 InDesign 或 Word 文档中使用 “Arial Rounded MT Bold”，然后将该文档发送给具有相同字体的 Mac® 用户。这会导致问题；Mac 用户会抱怨 “Arial Rounded MT Bold (TT)” 不可用。这使得整个文档的字体非常怪异，并且有许多错误颜色或警告。这是什么原因呢？原来是不同的系统的字距不匹配。如果将字体从 Windows XP 转移到 Windows Vista，或从 Mac OS 转移到 Mac OS X，一样存在这样的问题。在 Linux®、Unix®、Solaris® 或其他 *NIX 系统上，情况更加糟糕。
实际上，有时同一系统上的相同字体会有不同的名称。操作系统正在尽力避免字体命名冲突。因此，您的 Times New Roman 版本可能和我的不一样。这造成的后果和前面一样：困惑、零乱的 Web 页面、在您的机器上能很好显示的消息在另一台机器上却异常难看。那么，如何在众多不兼容字体的系统上使您的页面美观可人，同时又避免字体带来的烦恼？
输入 “图像文本”
最近几年以来，DSL 和电缆调制解调器为 Web 设计人员和开发人员提供了新的选择。目前还不适合在站点上使用 1MB 的图像，但 10k，甚至 100k 的图像已经不再是沉重的负担。图像丰富的站点拥有 “重量级” 的 Web 页面 — 用户可以下载更多的资源 — 这是可以接受的，甚至成为一种规范。访问 http://www.apple.com 或在线 CNN，它们拥有很多图像，甚至首页也这样。当然，人们都期望快速的 Internet 连接。
随着图像越来越多，越来越大，您会发现图像无处不在！您不必担心图像是否能在另一个系统上正确显示。虽然存在尺寸大小问题（是 否适合用户的屏幕）和下载问题（如果用户还使用 56k 的调制解调器），但字体的问题却解决了。因此您的站点用户不再需要安装 “Skippy Sharp”（Mac 版，2006 年，.font 格式）。相反，您可以用所需的字体在 PhotoShop 中写各种各样的文本，然后将其转换为图像，完成后就可以自豪地将它放到站点上了。
这样做的结果是 Web 站点充满了图像，甚至文本也以图像的格式显示。仔细看看现在的 Web 站点，几乎所有的徽标、题目、标题，有时甚至页面上的内容，都用图像来表示。虽然过度沉迷于图像不是一个好主意，但基于图像的文本似乎要成为未来的潮流。 不过 Google 却改变了这一切……
  |
|
|
Web 是语义媒介
HTML 和 XHTML 的根源是 SGML（Standard Generalized Markup Language）。SGML 的创建是为了组织和标记文档。图像只不过是 SGML 的衍生物。尽管图像是一个问题，但 SGML 最终围绕的主题还是文本。这也是 HTML 的起因：本质上是在 Web 可访问的页面上显示文本。引人注目的样式因素都是额外的。
但是当图像开始包含文本时，这一切都改变了。Web 上弹出的许多页面只不过是 一堆图像，它们带有一个出现在 img标记上的随意的 alt或 title属性。尽管 HTML 和 XHTML 严格要求图像具有 alt 属性，但文本已成为一种累赘。图像使设计人员创建漂亮的页面更加容易，而不必担心这些页面在其他用户系统上 “被丑化”。图像将以相同的形式在任意系统上显示（除非出现分辨率和颜色方面的问题，这是另一篇文章的主题）。随着图像使用越来越广泛，文本的作用开始逐步下降。
文本非常重要
乍一看，文本在现代 Web 页面上的衰退似乎不是个大问题。如果 Web 的主要目的是交流消息，图像是最好的 — 或者至少提供了清晰的通信 — 但充满图像的页面会造成问题吗？或者全是 由图像组成的页面？
答案是肯定的：可以！Google 比任何其他公司都更好地展示了这一点。Google 像大多数搜索引擎一样搜索 Web 中的文本！没错，Google 不能解释内嵌有文本的图像。Google 的搜索器会忽略图像，同时也忽略了嵌入在其中的产品说明（不管多么美观）。搜索引擎完全不考虑您的站点有多么漂亮，相反，它们关心的是 HTML 里面的内容。如果 HTML 中全是 img 标记，您的站点的 URL 将很难进入 Google 搜索结果的前 100 位，即使输入的关键词与您的站点几乎完全 匹配。
如果您要查找图像中消息，Google（实际上大多数搜索引擎都是这样）就无能为力了。大多数人的主页就是 Google 或 Yahoo! 搜索引擎。大部分 Web 会话都是以搜索开始。这意味着除非别人拥有您的 URL，否则他们在没有帮助的情况下将找不到您的站点。并且，不管您的站点的外观 多么漂亮，搜索引擎都不能找到它的文本文字（文字的含义就更不用提了）。
不要忘记可访问性
首先，Web 是为需要信息的人提供信息的场所，而不考虑 他们的限制。10 年前，人们认为要让有视觉障碍的人（甚至盲人）使用 Web 是非常可笑的；但今天却实现了。事实上，如果您期待自己的站点得到民众和政府机构的认可、使用，甚至褒奖，您必须确保网站是可访问的。这是必须的，没有选择的余地。
那么，可访问性和图像有什么关系呢？可访问性意味着什么呢？就 Web 页面来说，它可简单归结为：屏幕阅读器或类似设备可以解释页面，并通常通过声音的形式将其上的内容传播给其他有障碍的人。显然，屏幕阅读器和 Google 搜索引擎一样对您的图像一筹莫展。再一次，您只剩下通常被忽略的 alt标记来表示大量图片操作后生成的少量文字。alt 标记常常不够用，这是意料之中的。
最重要的文本是标题……
页面上最重要的文本是什么？问问别人，您将听到关于热销产品的介绍、一个标语或名人推荐。但这些答案的前提是别人知道您卖什么产品、谈论什么问题或支持什么。这个信息来自于页面的标题。它通常是页面文档头部的 title 标记内的文本，但它也通常突出地显示在一个良好站点的每个页面上。打开几个 Web 站点，您通常会在页面的顶部看到标题，并且左上角存在一个图标化的标题。
……最重要的文本通常是图像化的
当然，您也希望和标题一样重要的内容能够引人注目。因此，可以打开 PhotoShop，选择一个独特的、好看的字体，然后……屏幕阅读器和搜索引擎找不到它！虽然您已经在文档的头部显示了标题，但重复是个不错的方法，它 将向屏幕阅读器、访问者和搜索引擎表明这是重要的内容。因此，尽管 Web 设计人员大量使用规范的、非图像的文本，他们仍然用图像表示 Web 页面的标题。
|
|
|
Web 页面具有多个层
最后，解决方案是什么呢？幸好没有回到从始至终都是文本的 Web 设计模式。这里不是要抛弃您已经创建的漂亮图像，或每个页面的标题一定要使用 Arial。解决方案将把 HTML 和 XHTML 的文本历史和功能与 CSS 结合起来，各用其长。
结构、内容和显示
从更加具体的角度看，您的 Web 页面需要包含几个组件：结构、内容和显示。页面结构就是 HTML 和 XHTML 标记。body、div、Li 和 p 都是结构元素。它们定义页面的组织，并划分内容的不同部分。
内容就是页面的文本。虽然可以更宽泛地定义内容，但这里为了方便讨论，内容就指页面结构内的文本。当然，如果这样看待内容，基于图像的文本明显就不属于 页面的内容。内容被替换为图像。将内容看成纯粹的文本是很有局限性的，但考虑到不能解释图像的 Google、屏幕阅读器和软件时，还是很恰当的。对 Google 而言，内容就是 文本。
最后一个部分是显示，它是最神奇的。图像、颜色、字体风格、字体大小，甚至所有现代 Web 页面的滚动、拖放效果都属于这个类别（尽管有时需要行为组件来驱动动作）。基于图像的文本的类别属于显示，而不是内容。问题是所有软件驱动的东西都会完全忽略显示，比如搜索引擎或残疾人帮助程序。
层的放置
最实际的，也是设计 Web 页面的第一步，就是这 3 个层是垂直的。换句话说，您不能选择为一行文本提供内容或 显示。您必须分层放置层（这似乎很愚蠢，不管这句话写得多明显，大多数人都会忽略它）。内容在结构的 “上面”，而显示则在内容的 “上面”。您在 CSS 中应用的样式会影响到内容，但它通常是位于该内容的 “上面” 的层。显示层不会覆盖内容层，它只是增强后者。
但如果显示和内容属于层，为何仅通过显示层来加强内容层呢？相反，假设您想用显示完全覆盖 一片内容。或者假设您希望使用一些内容 — 比如非常棒的页面文本标题 — 并在该文本的 “上面” 放置另一个版本的漂亮的、高分辨率的、基于图像的标题。这样，您就可以同时受益于内容和显示。Google 等搜索引擎可以识别、分类和索引您 的文本内容，并且屏幕阅读器可以处理精确的文本内容。并且喜欢漂亮字体和感官的人，只能看到最顶层，即显示。
|
|
|
有效的 Web 页面会使用所有可用的层
当您意识到 Web 页面的 3 个组件都属于层时，就可以使用它们了。让我们为某个 Web 站点构建一个非常简单的介绍页面，并演示图像丰富的页面如何获得文本支持。
按常规布置页面
首先通过结构来布置页面。HTML head和 body 标记将文档分为不同的部分。然后，找到您要在页面上使用的基本组件。在这个示例页面中，它们分别是：
- 一个标题 “Tom Doerr Guitars”。
- 一个徽标或标语 “fine handcrafted guitars… instruments without compromise”。
- 一些较大图片展示了该站点的重点；很可能是某种吉他。
注意，这里忽略了所有特定于显示的细节。在这一阶段，我们谈论的是纯粹的内容和结构。
确定这些东西之后，继续创建 XHTML。不用担心 CSS；只需构建基础页面。 清单1展示了一个简单的开头。
清单 1. 这个简单的 XHTML 只涉及内容和结构
<![CDATA[<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Tom Doerr Guitars</title>
</head>
<body>
<div id="splash">
<div id="title">Tom Doerr Guitars</div>
<div id="slogan">
fine handcrafted guitars... instruments without compromise
<div>
</div>
</body>
</html>]]>
|
这是一个小巧的 “基础” XHTML。它包含了页面的头部、标题和正文。在正文之内，有名为 “splash” 的 div 元素；这是非常标准的 Web 实践。div 组织并分解页面，在这里也不例外。这个主要的 div 组织所有的内容。
然后是页面的标题。我们将要处理这个标题，因此使用另一个 div 来标识该标题，但这次使用一个 “title” 作为 id。所以在这个阶段，我们很少考虑显示。我们使用结构（div）来标识以后在现有文本上面覆盖图像文本的位置。这里仍然忽略了关于覆盖的大部分细节。
对标语执行同样的操作：创建另一个 div。该 div 内部就是文本标语。同样，除了 div 外，没有其他显示。
可能有点奇怪，不过事实就是这样！图1 显示了这个页面，它一个非常枯燥无味的 Web 设计。幸好它还未完成。
图 1. 没有显示的页面非常枯燥
这里的关键是 Google 或其他任何搜索引擎将查找它们可以索引的文本。这个站点的标题很清晰。因为它是标语，所以对人类而言也是可读性很强的。
识别不可视文本
在这个阶段，您可以考虑一点 显示了。我们知道有 3 种元素，所以现在需要考虑哪些是文本的，哪些是图像的：
- 一个标题，“Tom Doerr Guitars”。 我们对它使用带有定制或独特字体的图像。
- 一个徽标或标语，“fine handcrafted guitars… instruments without compromise”。 这也应该使用定制字体。
- 一些较大图片展示了该站点的重点；很可能是某种吉他。 这显然是一个图像。
因此在这种情况中，实际上页面上没有可视的东西，并且不是 图像！
当您知道什么是图像，什么不是图像之后，就需要从结构上识别将要隐藏页面的哪部分，尤其是文本。看看清单 1，它意味着将要隐藏标题和标语。为了方便以后查找，将这两段文本包含在 span 内。清单2 展示了现在的 XHTML 的样子。
清单 2. 将隐藏文本放在 span 标记内
<![CDATA[<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Tom Doerr Guitars</title>
</head>
<body>
<div id="splash">
<div id="title">]]><b><![CDATA[<span>]]></b>
<![CDATA[Tom Doerr Guitars]]><b><![CDATA[</span>]]></b><![CDATA[</div>
<div id="slogan">
]]><b><![CDATA[<span>]]></b><![CDATA[fine handcrafted guitars...
instruments without compromise]]><b><![CDATA[</span>]]></b><![CDATA[
<div>
</div>
</body>
</html>]]>
|
在这里使用 span 可能有点多余；所有在标题 div 内的文本将被隐藏，以及所有在标语 div 内的文本也一样。使用 span 来进一步标识文本是一个良好的实践。如果您以后希望标语 div 内的部分文本是图像，并且另一部分 — 比如副标题或说明性文字 — 保持为普通文本，您可以仅将隐藏的文本放置在 span 内部。
不管怎样，您现在有了 XHTML 页面，它具有可标识的部分，并且具有容易标记和查找的隐藏文本。
|
|
|
用图像文本覆盖文本
准备好内容和结构之后，您就可以添加显示层了。这里的工作和刚才对显示的处理差不多：一个具有许多选择符、规则和格式的 CSS 样式表。
为页面添加普通的样式
首先，添加背景颜色（可能是一张背景图），设置默认的字体颜色、样式、对齐，以及对 CSS 进行通常所需的设置。清单3展示了一个针对 Tom Doerr Guitars Web 站点的简单样式表。
清单 3. 针对 Tom Doerr Guitars 站点的 CSS
@charset "UTF-8";
/* Main CSS Stylesheet for Tom Doerr Guitars */
body {
background-color: #5D1008;
font-family: Verdana, Helvetica, Arial, sans-serif;
margin-top: 150px;
margin-left: 75px;
}
#splash {
height: 343px;
width: 514px;
background: url(../images/splash_guitar.gif) no-repeat bottom left;
}
#title {
position: absolute;
top: 80px;
left: 275px;
height: 93px;
width: 475px;
}
#slogan {
position: absolute;
top: 260px;
left: 375px;
height: 94px;
width: 399px;
}
|
您需要在您的 XHTML 中引用这个 CSS，如 清单4所示。
清单 4. 在 XHTML 中引用显示 CSS
<![CDATA[<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Tom Doerr Guitars</title>
]]><b><![CDATA[<link type="text/css" rel="stylesheet"
href="styles/doerr.css" />]]></b><![CDATA[
</head>
<body>
<div id="splash">
<div id="title"><span>Tom Doerr Guitars</span></div>
<div id="slogan">
<span>fine handcrafted guitars... instruments without compromise</span>
<div>
</div>
</body>
</html>]]>
|
把它上传到浏览器将看到如 图2 所示的效果。页面非常整洁：有一些样式，甚至文本也在最终放置图像的地方。很明显，要想显示正常需要反复的试验，但处理过程很简单。目前只需设置文档的普通样式，还不需要考虑隐藏文本。
图 2. 向页面添加大量显示
隐藏应该隐藏的文本
现在您需要隐藏两小段文本。由于使用了 span 标记和容易定位的 div，这个过程相当简单。首先，您需要一个在 CSS 中选择文本的规则。然后，您只需要设置 display 属性的值为 “none”。清单5 展示了更新后的 CSS，它们反映了这两处更改。
清单 5. 隐藏不希望被看见的文本
@charset "UTF-8";
/* Main CSS Stylesheet for Tom Doerr Guitars */
body {
background-color: #5D1008;
font-family: Verdana, Helvetica, Arial, sans-serif;
margin-top: 150px;
margin-left: 75px;
}
#splash {
height: 343px;
width: 514px;
background: url(../images/splash_guitar.gif) no-repeat bottom left;
}
#title {
position: absolute;
top: 80px;
left: 275px;
height: 93px;
width: 475px;
}
#title span { display: none; }
#slogan {
position: absolute;
top: 260px;
left: 375px;
height: 94px;
width: 399px;
}
#slogan span { display: none; }
|
这里已经隐藏了文本，但并没有使用什么技巧。在标题文本里，选择符是 #title span。#title 选择一个 id 为 “span” 的 div。然后，末尾的 span 选择该 div 内部的 span 标记。
上传页面，将看到 图3所示的结果。现在文本消失了，接下来只需添加文本式图像。
图 3. 文本已经隐藏
当然，这种显示不会影响页面的实际内容。尽管不能看见标题和标语的文本，但它们仍然在底层的 XHTML 中。这意味着搜索引擎、搜索器和屏幕阅读器都能够获取需要的东西来处理页面。现在，我们面临更高级别的显示，它会 “模糊” 或隐藏内容。
显示所需的图像
为了进行实践，您需要两个空的 div。当然，如果您已经有了需要显示的图像，并且准备好一个 div，就可以很轻松地显示图像了。仅需在 CSS 中使用 background: url 属性。清单6 展示了最后向 CSS 添加的内容，它向放置图像文本的两个 div 添加了背景图像。
清单 6. 使用背景图像显示图像文本
@charset "UTF-8";
/* Main CSS Stylesheet for Tom Doerr Guitars */
body {
background-color: #5D1008;
font-family: Verdana, Helvetica, Arial, sans-serif;
margin-top: 150px;
margin-left: 75px;
}
#splash {
height: 343px;
width: 514px;
background: url(../images/splash_guitar.gif) no-repeat bottom left;
}
#title {
position: absolute;
top: 80px;
left: 275px;
height: 93px;
width: 475px;
background: url(../images/title.gif) no-repeat top left;
}
#title span {
display: none;
}
#slogan {
position: absolute;
top: 260px;
left: 375px;
height: 94px;
width: 399px;
background: url(../images/slogan.gif) no-repeat top left;
}
#slogan span {
display: none;
}
|
再次上传页面，您将看到巨大的区别，见 图4。
图 4. 现在出现了图像文本
不要使用实际的 img 标记
最后需要注意的一点：相对于在 XHTML 中实际放置一个 img标记而言，您可能更喜欢在 div中使用背景图像。首先，XHTML 正确映射到显示的页面中。有一个带有文本（标题和标语）的部分（用 div 表示）。其次，每个部分都有一个条目：文本。该文本是 XHTML 中的实际文本和在浏览器中呈现的（图像）文本。最后，如果在 XHTML 中添加了 img，则需要进一步定位图像和 div。简而言之，使用带有实际文本的 div 会更加简单和准确，然后可以为 div 添加一个背景图像。
|
|
|
结束语
撰写关于语义 Web 的文章比想象中要难得多。您需要创建内容，并使用 XHTML 来组织该内容。不仅要求内容的精确性，还要求它是完整的。换句话说，内容需要完整地表示一个页面。因此，图像需要一些基于内容的表示。如果没有完整的内 容，Google 和其他搜索引擎将忽略页面，或者只是部分地索引页面。
但是，您还必须创建有吸引力的显示。即使是在包含大量信息的站点上，纯粹的文本也略为逊色。在处理前面定义的内容和结构的同时，您还需要通过 CSS 使页面美观实用。如果一个页面没有准确完整的内容，它再漂亮也是不实用的。但是如果没有恰当的显示，准确完整的内容就很难得到我们的赏识。
因此，需要同时构建结构、内容和显示这 3 个层。将每个层放置在其他层的上面，并让某些层对于某些类型的设备是可见的。您可以使内容对于搜索引擎和屏幕阅读器是可见的，同时又对观看者隐藏了这些内容。通过这些步骤，您就可以得到一个美观并且 具有准确文本的 Web 页面。
参考资料
- 您可以参阅本文在 developerWorks 全球网站上的 英文原文。
- 阅读一些关于 Fahrner Image Replacement 的理论，它正是本文详细说明的技术。
- mezzoblue 提供图像替换，但有严格的限制。它尝试在 Fahrner Image Replacement 上 取得进步。
- 在处理内容和显示时，您还可以 关注可访问性，尤其要深入了解屏幕阅读器。
原文转载自：IBM中国 http://www.ibm.com/developerworks/cn/web/wa-cssimage/index.html
作者：
