使用sIFR

sIFR:在可视化的浏览器访问网页时，通过使用flash和javaScript，用特定的字体（通常是一些漂亮的、系统默认没安装的）替换HTML文字的方法。这一方法不会牺牲“无障碍性”，并且没有安装falsh的访问者也能看能普通的、CSS样式化的HTML文字。适用于经常需要改变的文字。对于栏目标题等不需要经常变化的，可以制作成背景图片的形式，通过CSS，以“图像替换”的方式来达成。

需要准备:

1、从http://www.mikeindustries.com/blog/sifr/下载最新的版本。

2、准备好想用sIFR渲染的字体。

介绍和使用可参考：http://wiki.novemberborn.net/sifr/

转:怎样使用sIFR——sIFR技术初探

2008年04月08日 03:33 P.M.

什么是sIFR？

“sIFR表示scalable Inman Flash Replacement，是一种在web上准确发布自定义排版的技术。这种技术的实现方法是，当页面下载时，在一个指定的元素中用Flash渲染的文字来代替一些文本。理解下面这点是很重要的，这个元素并不是被Flash完全替换，文本仍在元素内，这个元素仍可以像通常那样被样式化或者被定位。”——详情参考[url＝http://www.w3cn.org/article/translate/2005/117.html]网页设计师[/url]

在这篇文章里你将学会如何在你的网站上使用sIFR。

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

你应该用sIFR来做什么？

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

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

复制内容到剪贴板

代码:

<!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>

解释一下：
1、

复制内容到剪贴板

代码:

<SCRIPT src="http://pqq.sundns.com/sifr/sifr.js" type=text/javascript></SCRIPT>

调用一个外部的JS文件，这个JS文件已经有现成的。至于这个JS文件里面讲什么，我也看不懂～～

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://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文件：

1、下载一个压缩包：sIFR2.0.1.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.1.zip里包含sifr.js文件。

这里还有一个flash的Macromedia的官方对这种技术的介绍，是E文的，在iLoug's bLog看到的。不听声音看画面也能搞清楚了。

但是很遗憾，我还没发现如何使sIFR支持中文：（

posted @ 2011-06-16 18:01 风逆阅读(780) 评论(0) 收藏举报

刷新页面返回顶部