标记语言——图片替换(2)
方法A: Fahrner图片替换(FIR)
以发现这个技巧的Todd Fahrner为名,FIR是用CSS的background(或background-image)属性把文字替换成图片的原始方法.
Douglas Bowman在2003年3月发表的极佳教学文件"Using Background-image to Replace Text" (http://www.stopdesign.com/also/articles/replace_text)使这个方法大受瞩目.
让我们通过一个简单的例子,用FIR吧标题文字替换成图片.
标记源代码
接下来要用来做替换的标记源代码:
<h1 id="fir">Fahrner Image Replacement</h1>
这只是个简单的标题标签,里面有稍侯要用图片替换掉的文字.你会发现其中为<h1>标签指定的唯一的id,然我们稍后能用CSS完全控制这个标题.
图14-1显示了一半浏览器查看这段源代码时的效果,用浏览器的预设值显示标题(在这个例子里是Verdana字体).
图14-1 标题的预设样式
额外的标签
FIR在标记源代码的标题标签之外还需要一组额外的标签包围文字.可以使用任何想要用的标签,但是<span>标签的通用性质使它成为完成工作的最佳工具.不加上样式的时候,<span>对显示效果将不会有任何影响.
经过修改的标记源代码现在看起来变成这样:
<h1 id="fir"><span>Fahrner Image Replacement</span></h1>
现在我们放好了额外的<span>标签,准备加上CSS.
CSS内容
方法A的精华是以所拥有的两组标签分别完成两份工作,接着将以<span>标签隐藏文字,再为<h1>标签加上样式,指定背景图片,正是因为这两个步骤,所以会用到两组标签.
隐藏文字
首先,让用<span>标签的display属性把文字隐藏起来.
#fir span {
display: none;
}
这会把这个标题里的<span>标签里的文字完全隐藏起来,浏览器什么都不会显示,这是第一步,完全摆脱文字,不需要放上截图了,你大概能想象,结果会是一片空白.
指定背景
先以Photoshop制作一个文字图片(图14-2),当然可以使用其他的图片编辑器完成相同的工作.留意图片的长宽,因为稍后就会用上.
图14-2 fir.gif,用来替换掉文字的图片
图14-2这张图片的大小是287像素宽,29像素高,我们将把图片图图片的大小设定成<h1>标签的背景图片.
#fir {
width: 287px;
height: 29px;
background: url(fir.gif) no-repeat;
}
#fir span {
display: none;
}
先前在<span>标签上用display属性隐藏的文字内容,这边则使用background属性指定替换图片的长宽以及图片名称.
在<h1>标签上开了一扇"窗",大小与图片完全相同(287*29px),而图片则会在先前用display隐藏起来的文字后面显示出来.
图14-3是浏览器查看标题的效果,成果只有看到漂亮的图片.完美!
图14-3 Fahrner图片替换法的效果
优点
由于使用了CSS而不是标记语法提供图片,因此可以确定不支持CSS的浏览器能显示标题文字,需要替换图片只需要修改一个CSS就可以了,而不必去修改表及源代码.
但是这些优点也伴随着几个非常重要的缺点而来,值得一提.
缺点
易用性专家Joe Clark广泛的研究了Fahrner图片替换法对使用屏幕阅读器或其他辅助设备阅读页面内容的使用者有何影响.
他测试的结果能在他的文章 "Facts and Opinion About Fahrner Image Replacement"(http://www.alistapart.com/articles/fir/)看到.在这篇文章中,他发现大多数屏幕阅读器(或许错误的)遵守了这个声明:
#fir span {
display: none;
}
不仅视觉上隐藏了文字,这些规则还会是那些通过屏幕阅读器浏览的人完全听不到标题内容.某些人会争论display属性只应该被具有屏幕的设备解析.同时应该特别为屏幕阅读器建立新的CSS媒体类型,以便设计者能够更精确的控制系统如何展现未来的图片替换技巧.或者是屏幕阅读器应该遵守现存的媒体类型之一,像是aural.
除了屏幕阅读器遇上文字显示问题,FIR还有两个缺点:
- 这个方法需要一组不具备任何语义的<span>标签才能运作.
- 再使用者关闭浏览器显示图片,但又启用CSS支持的极少数情况下(通常是为了节省带宽),文字和图片都不会显示出来.
衡量优缺点
事实是使用FIR,设计者会冒着无法对残疾人士提供完整内容的风险,同时对关闭图片显示,启用CSS的使用者也冒着相同的风险.这里必须衡量优缺点,了解缺点,小心使用.
有些情况使用FIR很有道理,在本章后面的"技巧延伸"单元,我会分析两种这类情况.
由于这些易用性研究成果浮上台面,因此其他设计师开发者不断调整,尝试图片替换技巧,寻找新的方法"隐藏"一般文字,并且为北京制订图片,接着看看以下几种方法.