什么是sIFR？

“sIFR表示scalable Inman Flash Replacement，是一种在web上准确发布自定义排版的技术。这种技术的实现方法是，当页面下载时，在一个指定的元素中用Flash渲染的文字来 代替一些文本。理解下面这点是很重要的，这个元素并不是被Flash完全替换，文本仍在元素内，这个元素仍可以像通常那样被样式化或者被定位。”
在这篇文章里你将学会如何在你的网站上使用sIFR。

设计你的站点
首先用常规方法设计你的站点，并且保证你的标题用CSS定义好了，这是为了保险，如果访问者没有flash播放器或者浏览器不能执行javascript的话，sifr就失效了，浏览者还是可以看到文字文本的标题的。（国外设计师就是考虑周到）

你应该用sIFR来做什么？

sIFR是冲着为“标题”服务而来的。当然你用sIFR取代其他元素也无可厚非，比如“段落paragraphs”或者“列表什么的list items”，但是不推荐你这么做！请同样不要用sIFR取代链接：浏览器对flash中的链接与常规html中的链接是区别对待的，因此如果你用 sIFR取代链接会使网页可用性受到损伤。

先看我做的一个最简单的例子：
代码如下：

2、
<style type="text/css">
<!--
/*替换html标签的css*/
.sIFR-replaced {
     visibility: visible!important;
}
/*替换文本的flash*/
.sIFR-flash {
     visibility: visible!important;
}
/*放在FLASH中的文本*/
SPAN.sIFR-alternate {
     display: none;
}
/*定义FLASH中的文本*/
.sIFR-hasFlash H1 {
     font-size: 50px;
}
.sIFR-hasFlash H2 {
     font-size: 30px;
}
.sIFR-hasFlash H3 {
     font-size: 30px;
}
-->
</style>
由于元素中的文本会被flash中的文本所替代，所以用上面的css定义flash中的文本。为什么那样定义？尤其是那几个visibility: visible!important;我还不是很明白～～

3、当当当！sifr使用的重点！看看下面这段Javascript代码：
<SCRIPT language=Javascript type=text/javascript>
if(typeof sIFR == "function"){
//首选的语法格式
     sIFR.replaceElement(named({sSelector:"h1", sFlashSrc:"http://uni-electric.com/images/seoptimistic-normal.swf", sColor:"#990000", sLinkColor:null, sBgColor:null, sHoverColor:null, nPaddingTop:0, nPaddingLeft:0, sFlashVars:"textalign=left&offsetTop=10",sWmode:"transparent"}));
//缩写的语法格式   
     sIFR.replaceElement("h2", "http://uni-electric.com/images/seoptimistic-normal.swf", "#000000", null, null, null, 0, 0, 0, 0);
     sIFR.replaceElement("h3", "http://uni-electric.com/images/seoptimistic-normal.swf", "#000000", null, null, null, 0, 0, 0, 0);
};
</SCRIPT>
sSelector: css选择器，选择你所要用sIFR替换的元素，其中的h1当然也可以是ul或ul li或.header或#header或#header ul

sFlashSrc: flash的地址，绝对或者相对地址。这个flash的实际上起字体的作用，字体包含在这个flash中。如何产生这个flash字体在后面介绍。

sColor:"#990000", sLinkColor:null, sBgColor:null, sHoverColor:null 依次flash中的字体颜色，有链接的字体颜色，背景色，鼠标滑过的颜色，和css中的color,a:link,background-color， a:hover是一样的。没有的话，用null代替或者省略这句不写。

nPaddingTop:0, nPaddingLeft:0，npaddingright:0,npaddingbottom 和css中的padding-top,padding-right,padding-bottom,padding-left一样的。这里的单位是PX， 但是不要把“px”写上去，值为0的话可以省去不写。

sFlashVars: flash中的其他变量，这些变量用&隔开。textalign=left文字居左；offsetTop我认为相当于css中的margin-top，同理有offsetright、offsetbottom、offsetright。

sWmode：选择flash是否透明，默认不透明，使用“transparent”透明（文章中不建议使用透明，说是在Opera 7.x、linux、Mozilla早期版本不支持，国外设计师考虑得太周到了，我在IE6和FF1.X下测试都支持，用用也无妨。）

还有一个sCase: "upper"这个搞不明白是做虾米的。

OK,大家对sIFR的使用有个大致了解了吧。

下面说一下如何产生那个包含字体的swf文件：

1、下载一个压缩包：sIFR2.0.7.zip，地址：http://www.mikeindustries.com/sifr（里面有些东西是别人做好的，直接用就OK了，厉害点的完全可以自己写）

2、解压出来，两个文件夹：sIFR 2.0.1和__MACOSX，__MACOSX估计给苹果用的咱们用windows的不用理他，进入sIFR 2.0.1，看看里面有什么～～sifr.fla（flash源文件）和customize_me.as、dont_customize_me.as （Flash Actionscript文件）：这三个文件是用来输出swf文件用的，文件夹内的tradegothic.swf和vandenkeere.swf就是 现成的例子。你也可以把那个三个文件复制出来使用，但确保这三个文件在同一个目录！

3、用flash打开sifr.fla，选择“选择工具”在空白出双击，出现“do not remove this text”这几个字，在属性面板中自己喜欢的字体，然后发布（shift f12）,然后在目录里就可以看到产生一个sifr.swf文件，为了方便辨认 把它重命名为其字体的名称，如“Arial.swf”。

sIFR2.0.7.zip里包含sifr.js文件。

但是很遗憾，sIFR不支持中文，原因是中文字体太大，一个字体好几M，网站打开肯定非常慢。