谈谈sIFR – 可伸缩Inman Flash替换
最近都在赶工我的新网站 Cuthtml.com ，在这个过程中也学了许多的东西，在校验XHTML 1.0 Strict的时候学到了 a 标签被取消 target 属性之后的弥补方法等新知识。不过今天先来看看sIFR，这个名词也是在参考同行网站时发现的。
sIFR（scalable Inman Flash Replacement），即“可伸缩Inman Flash替换”技术。是由Mike Davidson在IFR方法的基础之上扩展的一种技术。它通过Flash + JS + CSS联合实现在不替换页面中文本元素的情况下，对文本进行更为细腻准确的效果渲染。
2004年，网站开发者Shaun Inman创造了Shaun Inman Flash替换法。这种方法既在一定范围内保持了轻便性和直观性，又完成了用基于Flash的文本替换普通HTML文本的工作。
网站开发者Mike Davidson在Inman技术的基础上构造出能适应文字放缩和多行文本的系统，更进一步的完善了健壮性。
使用sIFR你可以任意定义WEB中的文本字体，即便是客户端浏览器未安装的字体。sIFR使用Flash渲染字体效果，可以平滑消除文本锯齿，你可以像使用用CSS控制文本一样轻松得到各种文本效果。
sIFR技术实现原理
基于Flash允许将字体嵌入SWF文件，所以事先将字体加载并生成Flash的SWF文件。然后通过JS控制进行页面文本的二次渲染。实现的方法是加载JS文件，通过JavaScript对Web页面进行搜索，找到设定元素或者设定类名的元素中的所有文本。然后JavaScript将文本重新渲染并在最终浏览页面上输出成为一个小的Flash文件。并且在此渲染过程中并不需要为每段文本创建一个单独的Flash文件，而是将被渲染的文本放回到一个重复的Flash文件中。因此，触发图像替换所要做的只是添加一个类，Flash和JavaScript会完成余下的工作。通过编写JS文件和CSS控制，可以在只调用同一个Flash的情况下实现对多行文本进行多种字体大小，字色的复杂表现。因为它并没不是文本的替换，所以文本在页面中仍然可以选中，复制。甚至可以重新被CSS定义。
sIFR的优点
- sIFR不需要更改(X)HTML代码，所有的工作由Javascript、Flash和CSS来完成；
- 如果用户没有安装Flash或者不支持Javascript，那么(X)HTML的文本就会被CSS样式化后显示出来。
- sIFR是可缩放的，可以在渲染时更改为用户设置的缺省字体尺寸。
- sIFR兼容所有的屏幕阅读机，至今还没有问题被报道出来。
- sIFR的文本可以被鼠标选择，尽管当全选文本时，选中的状态看上去不那么确切。
- sIFR不影响搜索引擎的定位和评定，不会隐藏真实的文本内容。
sIFR的缺点
sIFR技术的主要问题涉及装载时间。页面必须完全装载，然后JavaScript才能替换文本。因此，在所有文本被替换为Flash内容之前常常有短暂的闪烁。尽管这不是个大问题，但是会被访问者注意到，会给人留下页面装载慢的印象。另外，如果进行许多Flash替换，一些页面感觉起来有点儿迟钝。最好将替换减少到最少，只对主要标题使用这种技术。
什么时候使用sIFR
就像所有的web技术一样，重要的是要懂得使用sIFR的最好的方式，以及能够知道最适合使用的场合。这指的是要为工作选择恰当的工具，特别是当sIFR作为一个工具从工具箱中跳出让我们使用时。
案例：一个大型的体育新闻站点决定把所有的标题都设计成公司独有的字体。新闻报道（包括它们的标题）通过某些内容管理软件被世界各地不同的人在不同的地方发布。他们不可能雇佣一些人坐在Photoshop面前，当编辑们每次要增加新闻报道时就创建一张标题图片。
在这种情况下，sIFR就是一个绝对简单的，可使用的和可扩充的工具。一些新闻站点解决这个问题的办法是通过PHP来忙碌的创建图片，或者使用另一些服务器端的手段。这个办法可以很好的节省时间，但是当它与sIFR比较时，就会看到有许多缺点：
- 图片不能缩放为用户缺省的字体尺寸。
- 尽管图片被缓存在服务器上，但是在产生图片时仍然存在一个性能问题。
- 每一张图片都必须分别被下载，导致服务器和带宽的消耗。
- 而采用sIFR，那么就只有一个Flash(.swf)文件和一个Javascript (.js)文件被下载，并可以使站点上所有的标题都被渲染为公司的字体。
这个例子不是空穴来风。这是一个真实的案例，在2001年，为了重新设计ESPN.com，Mike Davidson开发出了最初的Flash替换技术。从那以后，随着Shaun Inman和其他人的加入，这已经发展成为今天我们所拥有的完整而流畅的技术了，而且很有可能在2005年对web排版技术产生重大的冲击。
在链接上使用sIFR
最新版本的sIFR允许链接文本被替换。尽管这是一个令人兴奋的发展，但毕竟不适合运用在这样的场合。这是由于以下的可访问性问题：
- 不支持浏览器的右键点击功能（上下文菜单）
- 不支持apple的option键
- 没有状态条信息
虽然这些问题显得很琐碎，但是很多人发现这些功能的缺失很令人丧气。缺少状态条的信息，你就不能获得你下一个要访问的地址的线索；随着诸如Firefox和Opera浏览器的普及，右键的上下文菜单正在变成一个越来越有用的工具。尽管sIFR在链接上提供一个基本的右键点击，但是浏览器的上下文菜单却是不可访问的。
当然，这是Flash的限制而不是sIFR自身的限制。这些问题看上去可以在将来被克服。举个例子，状态条可以通过Javascript来控制，所以增加显示出链接目标的功能应该不是很困难。但是，在Flash允许在链接上提供完整的浏览器上下文菜单之前，我相信sIFR还不能完全处理这类文本。
反锯齿
sIFR大多数的益处都集中在自定义字体的能力上，一个重要的考虑是Flash文本可以被反锯齿。Web开发者经常会忘掉这一点，部分是因为如此多的工作是用Mac OS X完成的，它的Quartz字体可以产生平滑的边缘。然而，Windows的使用者（尽管在显示菜单的某处有平滑字体边缘的选项）看起来并不能反锯齿，能够使这些用户，和预装Windows XP或Mac OS X的用户一样，拥有显示反锯齿标题的能力是一个重要的考虑因素。
精细调节
我听到有一个问题多次被提及，那就是sIFR不允许像控制一张图片所可能做的那样来控制文本。确实是这样。用Photoshop或者Fireworks创建的图片，你可以精确的控制字距，拉伸，反锯齿，或者另一些特性，诸如非常准确的下投影。图像编辑器是一个真正的WYSIWYG（所见即所得）的媒介。而渲染为Flash的sIFR却不是。
如果需要达到这个层次的控制，那么一幅图片仍然是发布这类文本的最好的方法，在这些情况下sIFR不是正确的工具。但是，如果纯粹是要发布一个自定义的字体，那么sIFR就比创建图片更适合了。
下载速度
当使用sIFR时，替换文本的着色速度是一个重要的考虑因素，虽然从早期的版本以来，速度已经有了一个很大的提高，但是如果在同一时间屏幕上有很多的sIFR实例，那么还是有明显的延迟。（比如，每个页面有一个标题，或者每次传送都有标题）这个例子也许可以最好的说明，为什么适度的使用sIFR是当前使用这项技术的理想方式。
这是使用Flash替换技术的最令人丧气的缺点了。从实现第一个sIFR时起，这诱惑便是在一个页面上替换太多的元素。为了实现它们，下载的速度必须有非常大的提高；虽然一个好的服务器可以帮助你，但是真正消耗时间的是运行那些体积庞大的Javascript。
sIFR具体实施
要想在站点上使用sIFR，首先要从http://www.mikeindustries.com/sifr/上下载这种技术要使用的JavaScript和一些组件。
接着打开sifr.fla，使用Flash文件。点击白色的帆布状区域打开属性调色板（如图3-18所示）。
为网站设计选择您喜欢的字体（如图3-19所示）。
图3-18：打开Flash属性调色板
图3-19：从Flash属性调色板中选出字体
接着，导出文件并用字体的名字为文件命名。比如，Bell Gothic字体命名为bellgothic. swf。
sFIR文件中包含一组CSS规则，这些规则都需要拷贝复制到站点的CSS文件中。读者在使用sFIR方法的时候务必引入这些文件。然后调整CSS规则引入字体，如下：
h1 {
font-family: "Bell Gothic", Arial, Verdana, sans-serif;
margin: 0 0 .3em 0;
padding: 0 0 .3em 0;
border-bottom: 2px solid #666;
text-align: left;
font-size: 2em;
}
最后，上传文件查看结果，效果应该如图3-20所示的标题一样。
图3-20：标题以Bell Gothic字体显示
总结
sIFR并不会和图片替换技术相竞争；它是针对不同工作的独特的工具。它能被最好的使用在那些显示为浏览器缺省字体大小的，而又不能替换为自建图片的文本上。
sIFR理想的使用场合是，当你想要仅用一张图片就显示自定义的字体或者反锯齿的标题时。这在web上被非常频繁的使用，在这些案例中sIFR是一个更好的选择。它可以缩放为用户缺省的字体尺寸，可以被选择，可以使用在数以千计的页面上而只需要下载一两个文件。
结论应该是，sIFR是一种可使用的，慎重的技术，设计者和开发者使用时应该给予认真的考虑。
摘要
- 在页面标题上使用sIFR。
- 有限度的使用sIFR，以获得最佳的下载时间。
- 不要在链接上使用sIFR。
1 Comment
我要评论不错，很详细