It’s not just those labeled as ‘disabled’ who stand to gain either. Research suggests that 57% of adult computer users will benefit from enhanced accessibility of some kind. Only 19% of websites currently meet the most basic accessibility requirements, so you can really stand out from the competition by making a few changes to your site.

In this article, we explore 12 ways in which you can make your site more accessible. Some methods are very cheap and quick to implement, others require a little more time and financial investment, but you should think of them as business opportunities. With the internet so central to all of our lives these days, it’s unfair that some people are being left behind.

Read More

And this article is the experiences I got during making the print style for PageTalks.com.

Before making a print stlye, the preview is terrible:

What I’ve been told

Eric Meyer sums three ways to implement the print style on a web page.

• <LINK rel=”stylesheet” type”text/css” href=”print.css” media=”print”>
• @import url(paged.css) print,projection;
• @media print {…}

The principles of building a printer-friendly page always require the designers to bear in mind the general idea of saving ink. To do so, we have to accomplish some simple steps:

• hide all banners
• hide all widgets, sidebars, comments and so on
• use white background
• assign correct font size for printers

With the font-size properties, point value is doing a better job here and readers will be more comfortable with serif font-family. Eric chose 12pt for font-size, but I think it’s pretty huge value for texts. So I use 10pt instead.
In fact, you need to reset all the properties related to typography using pt. E.g:

body {
font-size: 10pt;
line-height: 15pt;
margin:12pt 6pt;
padding:3pt;
}

body a,body a:link,body:visited,body a:hover,body a:active {
background:#FFF;
color:#000;
text-decoration:none;
}

body h2,body h3,body h4,body h5,body h6 {
line-height:125%;
}

body h1 {
font:bold 10pt/150% helvetica, arial, sans-serif;
letter-spacing:0.3pt;
margin:6pt 0;
text-transform:uppercase;
}

body h2 {
border-bottom:1px dotted #AAA;
font:14pt/150% georgia, times, serif;
margin:18pt 0 6pt;
padding:0 2pt 0 0;
}

body h3 {
font-size:9pt;
margin:18pt 0 6pt;
text-transform:uppercase;
}

body p {
margin:0 0 12pt;
}

body div.entry-date {
border:1px solid #999;
float:right;
font-size:7pt;
margin:0 3pt;
padding:1pt 3pt;
text-transform:uppercase;
}

@import Doesn’t Work

Don’t pannic. Firefox does a good job to load import rule with media type. However, it’s not so lucky with IE6. (I didn’t test IE7 or IE8, since IE6 users overnumbers the total users of IE7 and IE8)
IE6 seems to be unable to parse a @import rule with media type like this:

@import url(paged.css) print,projection;

Without media type, it can obey the import rule as Firefox does. Believe or not! See my test page and play aroud with IE6: Test for Import Rules

Declarations of media is supported by IE6, which means you can add do it like this:

@media print {
@import url("print.css")
}
or just use link tag:
<LINK rel="stylesheet" type"text/css" href="print.css" media="print">

What else should be hidden from printers

Beside font properties, making unneccessary contents invisible is also a tiring task. Technically, besides the contents we’ve listed before, we should hide all interactive components like forms, buttons, inputs and so on. That’s because users can’t interact on the papaer and we just save more ink by not printing them at all. E.g:

The comment form is impossible to be used on a paper.

Some links that triggers a javascript event or point to actions that impossible to take on papers.

Edit link is useless. More often than not, users holding the paper don’t intend to ‘Edit’.

/* Hide unneccessary contents */
body div#blog-description,body div.sidebar,body div#access,
body div#globalnav,body span.archive-meta,body div.entry-meta,body div#footer,
body div.navigation,div#respond,div#trackbacks-list,body div.formcontainer,
body form, body div.serve-bar, .comments .comment-meta * {
display:none;
}

/* Hide contents generated by Javascript and flash */
.lang-select ,body div.entry-content embed, body div.entry-content object {
display: none;
}

Override CSS

It’s ideal to seperate print style and screen style completely. In my case, I don’t want to rewrite the layout in print style. That means I’m bound with the troubles of inheritence.

In the CSS for screen, I specify the widths and postions of containers. It’s time for me to reset it in print style.

You’d better clear the paddign and margin so as to make most of papers
When assigning width values, avoid use px unit; margin of 5% is prefered

/* Override the layout for printer */
body #container {
margin: 0;
padding: 0;
width: 100%;
}
body #container #content {
margin: 0;
padding: 10px;
}

body div.entry-content a.more-link {
position: static;
}

Just watch out if you have to do the similar job.

Where is my LOGO?

Clicked the print preview button and found my logo was gone.
It’s not surprising for you to understand the broswers will hide css background automatically. I use a image replacement technique to display my logo, so the background is just hidden.

The only choice left to me is to use a IMG tag to show the logo.

I re-designed the logo for print and hide it in CSS for screen.

body #header div#blog-description, body #header h1#blog-title {
display: none;
}

body #header {
width: 257px;
height: 58px;
text-indent: 0px;
top: 0px!important;
left: -10px;
z-index: 11111;
}

#blog-logo {
display: block;
}

Final Result

After multiple tweakings, we finnaly got a nice print stlye:

Try to create your own print style!

深奥？看仔细点……这简直就是顾弄玄虚啊！不就是XHTML加了一群Class标签么？非也，此乃Microformat……

秉承以人为本，机器为其次的理念，微格式是一套构建于已经广泛接受的标准之上的，简洁、开发的数据格式。

Designed for humans first and machines second, microformats are a set of simple, open data formats built upon existing and widely adopted standards.

官方是如此定义的。如今Microformat已经成为了标准之一，可它就像众多其它标准一样，不为人知。尽管Microformat的技术仅仅是通过定义一套合法、合理的Class属性来进一步“格式化”HTML文档，但如今并没有并广泛使用。除了Yahoo、微软、Goolge的诸多服务中已经应用此项技术，众多网站还未加入这一行列。

Microformat的产生，直接原因大家都清楚，那就是HTML（XHTML）的弱语义性。什么是语义？简单解释，遵循一定语义，通过关系模型的再利用，处理程序能快速、便捷的从Web上获取可用性数据。例如，拥有强语义性的社区网络站点（SNS），可以轻易的让开发者创建一套应用程序从页面本身抓取用户信息、建立联系卡片（并非认为通过阅读来操作）。尽管有OL（有序列表）、UL（无序列表）、P（段落）等具有一定语义的标签，可是HTML面对当今越来越多的网络应用，已经毫无招架之力。结果是，DIV可能装载着几幅风景图片，也可能装载着这个景区的介绍文字。这些东西，靠人类的大脑，可以很轻易地重新建立起关系模型，可是对于计算机来说，目前来说是“Mission Impossible”。
大家都知道，XML可以定义namespace，那么自由地创建自定义标签是轻而易举的啊！问题解决了？怎么可能……XML是一种当今Web当之无愧的数据装载标准，可绝不是用来装载、组织内容的！你无法用XML重现你使用HTML实现的内容，谁来告诉我你怎么在XML中装载Flash和脚本？

迄今为止，微格式是向着导出 Web 上的结构化数据这一方向迈进的一小步。理念非常简单。获得一个包含某些事件信息的页面：开始时间、结束时间、位置、主题、Web 页面，等等。过去的方法是将这些信息放置在页面的超文本标记语言（HTML）中，微格式摒弃了这种做法，而是添加一些标准化 HTML 标记和层叠样式表（CSS）类名。页面依然可以保留您选择的任何外观，但对于寻找这些格式化的（或者应该说，是微格式化的）HTML 片段的浏览器来说，变化无处不在。

使用 microformats 分离数据与格式一文中如此说道我们为什么要使用Microformats。
如今已经存在的几种Microformats定义，包括hCalendar,hCard,rel-license,rel-nofollow,rel-tag,VoteLinks,XFN,XMDP,XOXO。你可以到Microformats的官方Wiki里面查找详细的定义标准。PageTalks实际上已经使用了Microformats，这主要归功于这套界面的骨架来自Sandbox，一个良好的模板框架。

再来回到文章开头的那串代码。它没有破坏内容的表现，没有加入额外的信息，也没有对客户作出额外的软件要求，它就是安静的躺在一堆HTML代码之间。通过XPath或者jQuery的选择器，我们能够轻易获取相应的数据：我在2008年9月5号写了这篇文章，它有相关url以及tag……
意义在哪里？加入大部分都按照Microformats进行页面编写，那么在Web上利用程序寻找可用数据将是一件非常容易的事情，也许到时候每个程序员都可以做个“Google”出来……
好吧，人要有梦想才好嘛……

在网上碰巧发现一篇写Microformats的文章，这样尴尬的说道：

1.目前支持microformat只有Firefox的Operator插件。
2. Firefox市场占有率对于中国，即便它在发展壮大，还是奇低。平均高估一下：FF占有率10%吧。 3.使用Firefox的人群能有几个人知道Operator？连我都一直不知道，更不要说其他人了，更不要说人民群众了。再平均高估一下：1%吧（100个Firefox中有1个装了Operator）
4.装了Operator的人已经处于领域浪尖了，好了，有几个人真正在使用，而不是看着Operator上出现的识别数字YY？坦白的说，我装了Operator后，行为上属于后者，纯粹YY。去导出hCard？然后干嘛呢？我疯了，我有病！……继续高估：1%（100个安装了Operator的人中有1个人在真正使用） 5.好了，你突破了上述种种关卡，成为了浪尖上冒泡的水花，精英中中奖的英雄，骄傲吧……请问你访问100次网站，能用几次？你雄心壮志的以为中奖，结果是什么都没有，安全期……TT，最后的结局是：1%。

好吧，Microformtas达到像XML的普及程度都要N年吧……但是如果告诉你，规范一下你相关元素的标签就可以使你的网页支持未来的应用，那不是很好么？

Google要做浏览器了！疯掉了，这个世界疯掉了！这个场景让我们回到之前传言Google要开发手机一样……不过事实表明，只有我们想不到的，没有Google做不到的。事实上英文版的Google Chrome已经在今天发布了。
 

从界面来看，我们设计了一个简单而高效的浏览器窗口。对大多数人来说，浏览器本身并不重要，它只是一个能够运行互联网网页、网站和网络应用等重要程序的工具。正如谷歌的经典主页，谷歌浏览器延续了简洁、快速的设计理念，帮助用户快速准确地到达目的地。
从根本上讲，我们提供了一个能更好地支持各种复杂网络应用的浏览器基础平台。通过让每一个标签相互独立开来，从而避免了两个标签页产生冲突的可能，同时面对来自恶意网站的攻击，谷歌浏览器提供了更好的保护。我们提高了浏览器整体上的速度和响应度。我们还建立了一个更强大的 JavaScript 引擎 V8，以便为下一代网络应用技术提供支持，这些网络应用在目前的浏览器上几乎不可能实现。

Google的官方如是说，对广大用户来说，算是又多了一个简洁、快速的浏览器。（相信会和Google服务无缝链接）
对于开发者来说，JS V8的支持是一个亮点（不过现在JS V8过于前沿？）。必须注意的是，Google Chrome是基于Webkit的浏览器，我们能够大胆猜测，在Safari下能够测试通过的网页，在Google Chrome也应该没问题，希望……
Google有特地强调安全机制方面问题，我不知道会不会造成脚本和各种嵌入元素的安全特性造成改变。种种猜测，希望在正式版发布之后给我们一个答复吧！
更多消息请到Google 黑板报，以及Google的官方宣传漫画！

Update I test Google Chrome today. Most sites are displayed properly in this browser. (See the picture below. It’s a system page in Chrome where shows the clear comparision to other browsers on memory usage. System gets date when I only open PageTalks in FF and Chrome, which is apparently unfair as FF has lots of plugin enabled……) Most importantly, it’s fast and combined with quick links to any web service. You can custom shortcuts to your favorite web applications. And a auto type checking. Others say that it’s not only a challenge to IE8 but it’s totally a challenge to MS, as it’s supposed to be a new operation platform in Cloud Computing era.

Google is beginning to develop its own brwoser. Crazy, huh? This remind us of the familiar situation when rumor saying that Google was creating its own cell-phone. It turns out that there is nothing Google can’t create, just something you can’t imagine. In fact, Google has released a Google Chrome beta today.
 

On the surface, we designed a browser window that is streamlined and simple. To most people, it isn’t the browser that matters. It’s only a tool to run the important stuff — the pages, sites and applications that make up the web. Like the classic Google homepage, Google Chrome is clean and fast. It gets out of your way and gets you where you want to go.
Under the hood, we were able to build the foundation of a browser that runs today’s complex web applications much better. By keeping each tab in an isolated “sandbox”, we were able to prevent one tab from crashing another and provide improved protection from rogue sites. We improved speed and responsiveness across the board. We also built a more powerful JavaScript engine, V8, to power the next generation of web applications that aren’t even possible in today’s browsers.

As Google explains, for most end-users, they have one more choice of brower which is undoubtly clear, fast. (We believe that all Google Service will connect to Google Chrome seamlessly).
For all developers, JS V8 is not a highlight ( but a little remote application?) We should note that Google Chrome is based on Webkit. Therefore we can predict that the websites working well in Safari will act perfectly in Google Chrome as well. (Hopefully). Google has emphasized on the security issues, which makes me thinking whether this means a lot some changes the way scripts and embedded elements work.Hope we will get answers in the finnal release.
For more info refer to Official Google Blog: A fresh take on the browser and an offcial comics.

几种格式的理论分析

JPG格式

JPEG 图片以 24 位颜色存储单个光栅图像。JPEG 是与平台无关的格式，支持最高级别的压缩，不过，这种压缩是有损耗的。渐近式 JPEG 文件支持交错。
可以提高或降低 JPEG 文件压缩的级别。但是，文件大小是以图像质量为代价的。压缩比率可以高达 100:1。（JPEG 格式可在 10:1 到 20:1 的比率下轻松地压缩文件，而图片质量不会下降。）JPEG 压缩可以很好地处理写实摄影作品。但是，对于颜色较少、对比级别强烈、实心边框或纯色区域大的较简单的作品，JPEG 压缩无法提供理想的结果。有时，压缩比率会低到 5:1，严重损失了图片完整性。这一损失产生的原因是，JPEG 压缩方案可以很好地压缩类似的色调，但是 JPEG 压缩方案不能很好地处理亮度的强烈差异或处理纯色区域。
JPG格式的优点可想而知，它能够在不大量损失画质的情况下实现不同比率的压缩，再加上24位全彩的支持，使他成为目前照片储存的标准格式（在Very High模式下，其质量已经和RAW不分上下，但是体积上JPG有绝对优势）。对于网页设计师来说，当JPG文件以Progressive模式压缩时支持交错，这个特性使它能同GIF一样，有从模糊到清晰的显示过程。
JPG格式的致命伤也正是由于它的有损压缩，它的压缩损失是不可恢复的，而且当一幅JPG文件多次被修改，并再次保存时，它也就经历了多次质量损失，这个过程是积累性的。

GIF格式

GIF(Graphics Interchange Format)的原义是“图像互换格式”，是CompuServe公司在 1987年开发的图像文件格式。GIF文件的数据，是一种基于LZW算法的连续色调的无损压缩格式。其压缩率一般在50％左右，它不属于任何应用程序。目前几乎所有相关软件都支持它，公共领域有大量的软件在使用GIF图像文件。GIF图像文件的数据是经过压缩的，而且是采用了可变长度等压缩算法。所以 GIF的图像深度从lbit到8bit，也即GIF最多支持256种色彩的图像。GIF格式的另一个特点是其在一个GIF文件中可以存多幅彩色图像，如果把存于一个文件中的多幅图像数据逐幅读出并显示到屏幕上，就可构成一种最简单的动画。
众所周知，GIF主要分为两个版本，即GIF 89a和GIF 87a；前者支持多幅图片组成动态画面，这就是当今网络上流行的动画图片格式。尽管这种格式在网络上流传的很泛滥，它实际上是一种比较过时的格式，因为它仅支持256色，并通过抖动来“模拟”出更多色彩。网页设计师在早期使用GIF的理由大多是为了它的透明背景功能。

PNG格式

PNG是20世纪90年代中期开始开发的图像文件存储格式，其目的是企图替代GIF和TIFF文件格式，同时增加一些GIF文件格式所不具备的特性。流式网络图形格式(Portable Network Graphic Format，PNG)名称来源于非官方的“PNG’s Not GIF”，是一种位图文件(bitmap file)存储格式，读成“ping”。PNG用来存储灰度图像时，灰度图像的深度可多到16位，存储彩色图像时，彩色图像的深度可多到48位，并且还可存储多到16位的α通道数据。PNG使用从LZ77派生的无损数据压缩算法。
PNG格式的诞生和JPG与GIF密不可分，它就是为了弥补两个前辈的不足而诞生的。它同JPG一样支持压缩比率、Progressive模式压缩，与GIF一样有256色模式。还有诸多算法上的特性在此就不必指出，作为网页设计师，必须记得的是，PNG同时支持真彩色和16位Alpha通道。

三种格式在照片环境下的对决

选择的图片原件是未经处理的JPG文件，大小在经过25%缩放后为1.7MB。以下我选择了三种格式非常常用的设定来进行横向比较，下面那副图片以PNG格式保存，可以忽略质量的再次损失。

GIF设定：128位抖动，这是一个GIF中非常高的设定。
JPG设定：质量为High（60），这个设定不高不低，通常我压缩图片可能会用95的质量。
PNG设定：24位真彩，PNG的标准设定。

从上图可以看出，GIF格式图片和原图相比已经出现了颗粒感，影响了表现；JPG格式相当接近原画，虽然细节表现上有一定损失；PNG格式文件则通过肉眼无法直接辨别两者的区别。
质量上来看，PNG是毫悬念的冠军，但是文件大小上PNG竟然有964K，相比之下JPG格式的109K、GIF格式的211K是毫无优势可言的。大家如果注意GIF格式的大小和效果，你会发现GIF根本不适合作为照片文件的储存格式。也就是说，如果你的网页上面要讲色彩细节丰富的图片作为背景，那么GIF绝对不可以选，PNG格式则太臃肿，而JPG可以提供非常廉价的折中选择。

简单文件的比较

图片格式和相应参数和上次一样，这次我们来看看这三种格式对简单图案的细节的表现。大家一定会说，”这还用比？肯定是PNG>JPG>GIF“的结果么！”好吧，我们边走边瞧。

你必须得相信你的眼睛，在这种环境下，GIF、PNG与原版设计图片毫无区别，但JPG竟然出现了澡点！如果你仔细阅读了前文对JPG格式的描述，那你应该可以预测到这个结果。
再来看看文件大小，原文件PSD档680K，GIF格式文件15K、JPG格式文件38K，PNG格式文件44K。综合来看，GIF完胜PNG和JPG！希望你的下巴没掉到地上……

谈谈文件的选择

文章到此处，我们已经可以得出这样的结论：1、需要表现丰富色彩的细节，例如照片、CG之类可以选择JPG；2、当想插入简单图案，色调单一的图像（图案）可以选择GIF。
那么我们完全把PNG忽视了？
别忘了我们之前说过PNG文件的两大特点：无损压缩真彩色和16位Alpha通道！光一个“无损”压缩就可以让它成为众多图片处理软件的最佳保存格式，而它的16位Alpha通道则使网页的表达千变万化。你可能又要问，GIF也支持透明啊，我为什么要用PNG？
GIF的确支持透明，但有本事让他搞个半透明？看看下面这副图片。原图是在Photoshop中以较低的硬度用笔刷点下的一个点，相当于一个透明度延半径方向线性降低的一个圆。这其中当然就包括程度不同的透明度。结果很明显，GIF文件当插入白色背景的背景图片中时，无法体现出透明的层次，反而会用灰色来代替有透明度的像素；但PNG文件则不同，它体现出了透明的层次，并且和背景完美融合。

PNG的这种特性使它能够处理网页中的阴影、插入不同层次的背景图片等应用。再另一方面，目前在设计图标时，也多用PNG文件储存，为了这些图标（如各种表情图标）能够完美和背景融合，也直接插入PNG格式的文件(但如果你的浏览着大多数都在使用不支持PNG的Alpha通道的IE6，那么就只能用GIF将就，或者使用相应的Hack）。这便是发PNG在网页设计领域无可替代的应用。可以说，把它作为插入照片的首选格式并不是明智的选择，毕竟人们从有损压缩的JPG格式那里可以得到更快的速度。

剩下的最后一个问题是这图片格式质量参数如何选，这个只能根据原文件的质量通过不同质量参数表较而成。现在Photoshop之类的软件都可以提供“为网页优化”的选择，可以方便的进行设置。

未来图片格式的进化

PNG格式的进一步优化无疑是未来的一大亮点。其他方面，更多全新的图形格式也在不断涌现，其中SVG是最引人注目的一个。

SVG是一种矢量图形格式，SVG提供了GIF和JPEG所不能提供功能优势：

1. 放大　用户可以任意放大图形显示，但不会牺牲锐利度、清晰度、细节等。
2. 文字状态依然保留　文字在SVG图像中保留可编辑和可搜寻的状态。没有字体的限制，用户将会看到和他们制作时完全相同的画面。
3. 小文件　平均来讲，SVG文件比那些JPEG和GIF格式的文件要小很多，因而下载也很快。
4. 显示独立性　SVG图像在屏幕上总是边缘清晰，并且可以使用你打印机的分辨率进行打印。不论是300 dpi，600 dpi还是更高，你都不会体验到难看的锯齿的点阵效果。
5. 超级颜色控制　SVG提供一个16百万颜色的调板，支持ICC颜色描述
   文件，RGB，渐变和蒙版。
6. 交互性和智能化　因为SVG是基于XML的，它提供无可匹敌的动态交互性。SVG图像可对用户的动作通过高光显示、工具技巧、特殊效果、声音和动画进行反应和显示。

虽然SVG的草案已经修订出来了，但是相应的软件支持还相当少，目前主流浏览器都不支持SVG。总之SVG能够带来更多的应用，可目前它离普及还有很远的一段路要走。

这个文章跟我的关系挺复杂的：几乎每天都在用里面的方法，但是直到CSS Zen Garden的那本书里面提到这篇文章我才知道这个方法的来源和特点。尽管是一篇03年的文章，但是目前还有人在使用这种方法，而且是那种可访问性非常差的做法。所以看看这件事情的来龙去脉还是很有趣的。正文如下：

注意

文章中原来介绍的FIR图片替代法已经不再被推荐使用了，因为它使文字完全无法被屏幕阅读器使用。请看看在“重要说明”中提到的其他替代方法
这个教程需要CSS的基础知识，但不需要太多。除了那些，也需要你能够合理、正确地和标记语言配合使用。

介绍

你还在渴望用装饰性的图片而不是纯HTML代码进行标题的排版马？即使CSS已经提供了那么多的修饰选项，有时候我们还是忍不住打开Adobe Photoshop，然后在里面设置我们喜欢的字体、大小、间距等。你认为只要你将它储存为图片文件，然后插入到Web页面，任何一个具有图片显示能力的浏览器都可以显示它，对么？
但当我们知道我们不能使用图片作为标题字体的时候，我们就好像受到了当头一击。没有办法，我们只能降低我们的审美标准，放弃使用图片来美化标题的念头。事情就是这样，直到CSS的下载能力在许多年后能够更完善一些。
我们都知道图片的可访问性没有纯标记语言好。这一点在辅助性浏览器中更为突出。我们真该为使用图片做为文字而感到罪恶。图片不会在像Lynx这样的纯文字浏览器中显示，还有一些浏览器开启了禁止图片功能。尽管我们提供了alt属性作为补充，但搜索引擎的机器人总会以不平等的方式对待alt、 title和HTML文字。这是可以理解的，思考一下诸如H1、H2之类的标记在逻辑上的意义吧！当我们将他们恰当的组合起来，我们也不用为文件大小问题而伤脑筋。
好吧，让我们把脑袋里的知识先放一下。图片真的这么坏吗？配合一些简单的风格技巧和细心的编码，网页上的字体可以即漂亮又“无罪”，而且具有可访问性，同样也可以被索引收录。是时候在把图片搬出来了！

概念

总的来说概念是很简单的。我们写了一串段的HTML字符（例如“Hello World”），并且将其用两组HTML代码包围。然后我们用CSS来隐藏文字，并显示一个同样含义的图片。就是这么简单——用图片换文字就是这么点东西。
在我们写CSS之前，让我们写一些基础的标签。假设我们现在有一些如下所示的HTML代码：

<div>
<span>Hello world!</span>
</div>

当然，我们可以直接将样式应用到文本上。但我们想让它们比使用font-family或text-trasform更漂亮一些。我们想要更花哨一些的字体！毕竟当我们想向世界问号的时候，我们要说的华丽一些。
在我们像世界问好的文字中，我们挑选出Shelley Allegro作为字体。这是一个在设计界很有名气的书写字体，在我们说“hello”的时候，它有能力赢得千万人的心。不过我们认为这个字体只在世界上 1.65%的机器上可用。所以我们特地用图片做出了这个字体的“Hello”。这个图像会显示Shelley Allegro字体下的“Shelley Allegro”。这样不管别人的机器上有没有这个字体，他都能看到这种包含Shelley Allegro字体下的文字内容。
我们先记下图片的高度（35PX），之后会用到。
我们现在有一些HTML代码，一个漂亮的文本讯息，一副华丽的图片。我们该怎么使用它们？让我们卷起袖子来用一点CSS代码来用图片代替文字吧！

Fahrner图片替代法

这个图片替代的方发是以Todd Fahrner，想出这个主意的人来命名的。你可以想象得到有有两组HTML代码包围了文字——一个是div，一个是span。严格的来说，这两个标签可以有多种可能。事实上，你自定义的解决方案可能需要语义上更加恰当的标签。但在这里我们选择这两个通用的框架来举例。
进行图片交换的CSS代码主要包括两条规则。首先使用background属性来把图片带入div之内：

div {
background-image:url("hello_world.gif");
background-repeat:no-repeat;
height:35px;
}

注意height那个属性，它的值就是图片的真实高度。这样就确保div有足够的高度来显示图片。background-repeat属性是确保图片只显示一次。
现在唯一剩下的事情就是HTML内部的文本。现在就该Span标签上场了。我们需要第二个元素来特别的定义它。隐藏这段文字很简单

span {display:none;}

配合我们之后写的HTML代码，组合这两条规则就完成了一个简单的实力。这么简单，都让我想不通为什么会花费这么多文字来解释它。
当然我们决不能就这么简单把代码丢在那。我们也不能就这样直接使用基于元素的样式，否则页面的每个Div都会显示那个图片；而且任何放置在<span>Hello world!</span>标签内部的内容将会被隐藏。
让我们来看下更实际的例子。

[译者略过原文中的实际举例部分，由于废话太多，而且原理本身已经不再被推荐使用]

可靠的替换方法

这个替换方法在使用时应该小心。你要仔细的将图片和原文本一一对应。否则那就是对于浏览者来说就是不公平了。这个替换方法中，文字的字体、大小、颜色、大小写、间距等树形是可以调整的，但这个是设计阶段的事情，不能直接通过调整HTML代码来实现。但HTML本身要保留可读性，例如应加上适当的空格、大写字母等。
下面有必要提一下使用这个方法的缺点和警示：

1. 尽管这个方法比直接插入图片的好，但对于搜索引擎来说这个昂法妨碍了他们索引的能力，用户也无法使用浏览器的“在页面内查找”功能找到你替换的文本。
2. 尽管图片被禁用，但CSS仍有效的情况很少，但如果真的是这样，那么标题上就是一片空白。
3. 替换后的文字将不可被用户操控，他们不能放大、修改颜色等。（纯HTML文本是可以的。

在一些特定环境下，使用这个替代方法需要有仔细的考虑。当真的要用这个方法，以上的那些告诫你必须记好了。狭小、对比度底的文字是不可靠的。定义字体或背景颜色时，色盲患者的问题必须考虑进去。
有时候好东西用得太多也会有副作用。当我们试验这个方法的时候，我们一定要小心。

浏览器兼容性

Mac: Camino .7+, IE 5+, Mozilla, Netscape 6+, OmniWeb 4+, Opera 5+, Safari
Win: Firebird .6+, IE 5+, Mozilla, Netscape 6+, Opera 5+, Phoenix .5+

重要说明

这个方法已经被证实在多数流行屏幕阅读器中失效。大家可以查阅Joe Clarks在A List Apart上发表的一篇内容详细、研究彻底的文章Facts and Opinion About Fahrner Image Replacement。
Joe在文中展现出来的结果表明FIR的做法本身就违背了它的初衷——创造一个更灵活、可访问性的解决方法，而不是直接用img标签和alt属性。这个方法的失策在于它完全没有预料到屏幕阅读器会无法读到带有display： none属性的元素。这是大多数屏幕浏览器的现状，就算我们设定了“screen”的media type情况也毫无好转。因为屏幕阅读器也会注意screen类型的media type，他们本身就是“阅读”屏幕嘛。大多数屏幕阅读器都不支持arual的media type，所以定义speark属性根本没有。

[译者注：CSS文档有对象类型的设置，平常我们用的最多的是对应电脑屏幕的media type，还有print、arual等类型对应不同应用。]

有人提议说用visibility：hidden来代替display：none；但这个同样会会阻止绝大多数阅读器的阅读。只有一个浏览器Jaws可以读出，但我们不能让别人只依赖着一个浏览器。
对于内容替代方法，仔细的权衡利与弊永远是对的。在这篇文章写完的时候，已经有不少其他替代方法了，每个都有它们的长处和短处。但不论哪种方法都没法完美的解决图片、文字的替代问题。已存在的FIR可替代方法如下：

Leahy/Langridge 图片替换法（FIR）

这个方法通过将父元素的height属性设定为0、overflow属性设定为hidden，可以省去span的存在。然后它使用padding- top去强制将元素变长，来显示图片。 这个方法几乎同时被Seamus Leahy和Stuart Langridge想到。
[译者注：例如div高度为0，但有padding，浏览器还是会产生padding的高度，就可以显示图片而文字在padding距离之外，也就是被“隐藏”了]

Rundle的Text-Indent方法

Mike Rundle创造了一个简单的方法——通过使用text-indent属性来将包含的文字跳出可视元素范围之内。
[译者注：text-indent即缩进属性，就相当于把文字推到右边去，自然露出背景图片。]

覆盖方法

另一种Petr Stanicek和Tom Gilder发明的方法用一个空白Span元素来定位一个图片在文字的顶部。这个也让当图片被关闭时，文字可以被显示出来。
[译者注：将span元素绝对定位到父元素的正上面，设定背景图片就相当于把父元素div内的文字给盖住了；理论来说这个是比较完美的解决方案。]
想进一步阅读关于FIR的主题，可以去看看之前提过的文章 Facts and Opinion About Fahrner Image Replacement和In Defense of Fahrner Image Replacement。

[译者注：恕本人的懒惰，那两篇文章吵来吵去就那几个内容，没必要掺和。本来就是03年发起的讨论，如今提起只是希望把其中的概念，和解决方法的思维学习一下。]