ホームページ >ウェブフロントエンド >CSSチュートリアル >sIFR_CSS/HTML をいつどのように使用するか
sIFR_CSS/HTML をいつどのように使用するか
- WBOYオリジナル
- 2016-05-16 12:11:001967ブラウズ
在分析sIFR之前，先来快速的了解一下sIFR是什么，以及它是如何工作的。sIFR表示scalable Inman Flash Replacement，是一种在web上准确发布自定义排版的技术。这种技术的实现方法是，当页面下载时，在一个指定的元素中用Flash渲染的文字来代替一些文本。理解下面这点是很重要的，这个元素并不是被Flash完全替换，文本仍在元素内，这个元素仍可以像通常那样被样式化或者被定位。
关于sIFR的一些事实：并不是为了辩论- sIFR不需要更改(X)HTML代码，所有的工作由Javascript、Flash和CSS来完成；
- 如果用户没有安装Flash或者不支持Javascript，那么(X)HTML的文本就会被CSS样式化后显示出来。
- sIFR是可缩放的，可以在渲染时更改为用户设置的缺省字体尺寸。
- sIFR兼容所有的屏幕阅读机，至今还没有问题被报道出来。
- sIFR的文本可以被鼠标选择，尽管当全选文本时，选中的状态看上去不那么确切。
- sIFR不影响搜索引擎的定位和评定，不会隐藏真实的文本内容。
结论应该是，sIFR是一种可使用的，慎重的技术，设计者和开发者使用时应该给予认真的考虑。
什么时候使用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还不能完全处理这类文本。
anti-aliasingMost of the benefits of sIFR focus on the ability to customize fonts. An important consideration is that Flash text can be anti-aliased. Web developers often forget this, in part because so much work is done with Mac OS X, whose Quartz fonts can produce smooth edges. However, Windows users (despite having an option to smooth font edges somewhere in the Display menu) do not appear to be able to have anti-aliasing enabled. These users, like those who come pre-installed with Windows XP or Mac OS X, have display anti-aliasing. Capacity of the title is an important consideration.
Fine adjustmentOne issue I hear mentioned several times is that sIFR does not allow you to control text in the same way that you can control an image. Indeed. With images created in Photoshop or Fireworks, you can have precise control over kerning, stretching, anti-aliasing, or other features such as very accurate drop shadows. The image editor is a true WYSIWYG (What You See Is What You Get) medium. sIFR rendered to Flash is not.
If this level of control is required, then an image is still the best way to publish this type of text, sIFR is not the right tool in these cases. However, if you are purely publishing a custom font, sIFR is more suitable than creating an image.
Download speedWhen using sIFR, the speed of shading of replacement text is an important consideration. Although the speed has been a big improvement since earlier versions, if there are many instances of sIFR on the screen at the same time, Then there is still a noticeable delay. (For example, each page has a title, or each transfer has a title.) This example may best illustrate why moderate use of sIFR is the ideal way to use this technology today.
This is the most frustrating disadvantage of using Flash replacement technology. Ever since the first sIFR was implemented, the temptation has been to replace too many elements on a page. In order to achieve them, download speeds must be greatly improved; although a good server can help you, what really consumes time is running those bulky Javascripts.
SummarysIFR does not compete with image replacement technology; it is a unique tool for different tasks. It is best used for text that is displayed in the browser's default font size and cannot be replaced with a custom image.
The ideal use case for sIFR is when you want to display custom fonts or anti-aliased titles with just one image. This is used very frequently on the web, and sIFR is a better choice in these cases. It scales to the user's default font size, can be selected, and can be used on thousands of pages without downloading just one or two files.
Summary- Use sIFR on page titles.
- Use sIFR to a limited extent to get the best download time.
- Don’t use sIFR on links.