首頁 > web前端 > css教學 > 如何及何時使用sIFR_CSS/HTML

如何及何時使用sIFR_CSS/HTML

WBOY
發布: 2016-05-16 12:11:00
原創
1967 人瀏覽過
作者:阿宏 2005-5-28 16:05:36

在分析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.comMike 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理想的使用場合是,當你想要只用一張圖片就顯示自訂的字體或反鋸齒的標題。這在web上被非常頻繁的使用,在這些案例中sIFR是一個更好的選擇。它可以縮放為使用者缺省的字體尺寸,可以被選擇,可以使用在數以千計的頁面上而只需要下載一兩個檔案。

摘要
  • 在頁面標題上使用sIFR。
  • 有限的使用sIFR,以獲得最佳的下載時間。
  • 不要在連結上使用sIFR。
相關的連結
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板