如何以及何时使用sIFR_CSS/HTML
- WBOY原创
- 2016-05-16 12:11:001961浏览
在分析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还不能完全处理这类文本。
앤티앨리어싱sIFR의 대부분의 이점은 글꼴을 사용자 정의하는 기능에 중점을 둡니다. 중요한 고려 사항은 Flash 텍스트가 앤티앨리어싱될 수 있다는 것입니다. 웹 개발자들은 종종 이것을 잊어버립니다. 부분적으로는 Quartz 글꼴이 부드러운 가장자리를 생성할 수 있는 Mac OS X에서 수행되는 작업이 너무 많기 때문입니다. 그러나 Windows 사용자(디스플레이 메뉴 어딘가에 글꼴 가장자리를 부드럽게 하는 옵션이 있음에도 불구하고)는 Windows XP 또는 Mac OS X가 사전 설치된 사용자와 같이 앤티앨리어싱을 활성화할 수 없는 것 같습니다. 디스플레이 앤티앨리어싱이 있으면 타이틀의 용량이 중요한 고려 사항입니다.
미세 조정여러 번 언급되는 한 가지 문제는 sIFR을 사용하면 이미지를 제어할 수 있는 것과 같은 방식으로 텍스트를 제어할 수 없다는 것입니다. 물론. Photoshop 또는 Fireworks에서 생성된 이미지를 사용하면 커닝, 늘이기, 앤티앨리어싱 또는 매우 정확한 그림자와 같은 기타 기능을 정밀하게 제어할 수 있습니다. 이미지 편집기는 진정한 WYSIWYG(What You See Is What You Get) 매체입니다. 플래시로 렌더링된 sIFR은 그렇지 않습니다.
이러한 수준의 제어가 필요한 경우에도 이미지는 이러한 유형의 텍스트를 게시하는 가장 좋은 방법이며, sIFR은 이러한 경우에 적합한 도구가 아닙니다. 그러나 순수하게 사용자 정의 글꼴을 게시하는 경우 이미지를 생성하는 것보다 sIFR이 더 적합합니다.
다운로드 속도sIFR을 사용할 때 대체 텍스트의 음영 처리 속도는 이전 버전에 비해 속도가 크게 향상되었지만 동시에 화면에 sIFR 인스턴스가 많으면 여전히 문제가 발생합니다. 눈에 띄는 지연. (예를 들어, 각 페이지에는 제목이 있거나 각 전송에는 제목이 있습니다.) 이 예는 sIFR의 적절한 사용이 오늘날 이 기술을 사용하는 이상적인 방법인 이유를 가장 잘 설명할 수 있습니다.
플래시 교체 기술을 사용할 때 가장 아쉬운 단점이 바로 이것이다. 첫 번째 sIFR이 구현된 이후로 페이지에서 너무 많은 요소를 교체하고 싶은 유혹이 있었습니다. 이를 달성하려면 다운로드 속도가 크게 향상되어야 합니다. 비록 좋은 서버가 도움이 될 수 있지만, 대용량 Javascript를 실행하는 데 시간이 많이 걸립니다.
요약sIFR은 이미지 대체 기술과 경쟁하지 않으며 다양한 작업을 위한 고유한 도구입니다. 브라우저의 기본 글꼴 크기로 표시되고 사용자 정의 이미지로 대체할 수 없는 텍스트에 사용하는 것이 가장 좋습니다.
sIFR의 이상적인 사용 사례는 단 하나의 이미지로 사용자 정의 글꼴이나 앤티앨리어싱 제목을 표시하려는 경우입니다. 이는 웹에서 매우 자주 사용되며 이러한 경우에는 sIFR이 더 나은 선택입니다. 사용자의 기본 글꼴 크기에 맞춰 조정되고, 선택이 가능하며, 파일 한두 개만 다운로드하지 않고도 수천 페이지에서 사용할 수 있습니다.
요약- 페이지 제목에 sIFR을 사용하세요.
- 최고의 다운로드 시간을 얻으려면 sIFR을 제한적으로 사용하세요.
- 링크에 sIFR을 사용하지 마세요.