参考文章：
原文： http://wiki.novemberborn.net/sifr/show/How+to+use
作者：Mark Wubben
原文： http://www.w3cn.org/article/translate/2005/117.html
作者：阿捷
先看个我做的一个综合实例：http://pqq.sundns.com/sifr/sifr.html ，页面里没有使用图片哦
什么是sIFR？
“sIFR表示scalable Inman Flash Replacement，是一种在web上准确发布自定义排版的技术。这种技术的实现方法是，当页面下载时，在一个指定的元素中用Flash渲染的文字来代替一些文本。理解下面这点是很重要的，这个元素并不是被Flash完全替换，文本仍在元素内，这个元素仍可以像通常那样被样式化或者被定位。”——详情参考网页设计师
在这篇文章里你将学会如何在你的网站上使用sIFR。
设计你的站点
首先用常规方法设计你的站点，并且保证你的标题用CSS定义好了，这是为了保险，如果访问者没有flash播放器或者浏览器不能执行javascript的话，sifr就失效了，浏览者还是可以看到文字文本的标题的。（国外设计师就是考虑周到）
你应该用sIFR来做什么？
sIFR是冲着为“标题”服务而来的。当然你用sIFR取代其他元素也无可厚非，比如“段落paragraphs”或者“列表什么的list items”，但是不推荐你这么做！请同样不要用sIFR取代链接：浏览器对flash中的链接与常规html中的链接是区别对待的，因此如果你用sIFR取代链接会使网页可用性受到损伤。
（下面的文字老外就有些唧唧歪歪～～～我PQQ融会贯通归纳总结，结合一个例子说明一下）
先看我做的一个最简单的例子： 点这里
代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>sIFR简单示例</title>
<SCRIPT src="http://pqq.sundns.com/sifr/sifr.js" type=text/javascript></SCRIPT>
<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>
</head>
<body>
<h1>h1:www.blueidea.com</h1>
<h2>h2:pengqaqa.bokee.com</h2>
<h3>h3:pengqaqa.bokee.com</h3>
<SCRIPT language=Javascript type=text/javascript>
if(typeof sIFR == "function"){
//首选的语法格式
sIFR.replaceElement(named({sSelector:"h1", sFlashSrc:"http://pqq.sundns.com/sifr/hancock.swf", sColor:"#990000", sLinkColor:null, sBgColor:null, sHoverColor:null, nPaddingTop:0, nPaddingLeft:0, sFlashVars:"textalign=left&offsetTop=10",sWmode:"transparent"}));
//缩写的语法格式
sIFR.replaceElement("h2", "http://pqq.sundns.com/sifr/ITCAvaGarMM.swf", "#000000", null, null, null, 0, 0, 0, 0);
sIFR.replaceElement("h3", "http://pqq.sundns.com/sifr/Times New Roman.swf", "#000000", null, null, null, 0, 0, 0, 0);
};
</SCRIPT>
</body>
</html>
解释一下：
-
<SCRIPT src="http://pqq.sundns.com/sifr/sifr.js" type=text/javascript></SCRIPT>
调用一个外部的JS文件，这个JS文件已经有现成的。至于这个JS文件里面讲什么，我也看不懂～～
-
<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;我还不是很明白～～
- 当当当！sifr使用的重点！看看下面这段Javascript代码：
<SCRIPT language=Javascript type=text/javascript>
if(typeof sIFR == "function"){
//首选的语法格式
sIFR.replaceElement(named({sSelector:"h1", sFlashSrc:"http://pqq.sundns.com/sifr/hancock.swf", sColor:"#990000", sLinkColor:null, sBgColor:null, sHoverColor:null, nPaddingTop:0, nPaddingLeft:0, sFlashVars:"textalign=left&offsetTop=10",sWmode:"transparent"}));
//缩写的语法格式
sIFR.replaceElement("h2", "http://pqq.sundns.com/sifr/ITCAvaGarMM.swf", "#000000", null, null, null, 0, 0, 0, 0);
sIFR.replaceElement("h3", "http://pqq.sundns.com/sifr/Times New Roman.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文件：
- 下载一个压缩包：sIFR2.0.1.zip，地址：http://www.mikeindustries.com/sifr（里面有些东西是别人做好的，直接用就OK了，厉害点的完全可以自己写）
