绝对的很小很好很强大的插件,太牛掰了!!!
可以在网页上以非图片形式显示特殊字体,可以复制粘贴,不影响SEO搜索,ma ma mi ya,ha li lu ya,我找了快一星期了!
踏破铁鞋无觅处,得来全不费功夫,我得意的笑~ o(^o^)o
很容易用,但用的很好需要最基本的css知识。
使用方法:http://wiki.novemberborn.net/sifr3/How+to+use
下载链接:http://dev.novemberborn.net/sifr3/nightlies/
=================
简要操作步骤:
Flash
- 打开 sifr.fla 文件,设置好字体及样式(粗体,斜体,正常等,不支持下划线的样式,每个样式写一个字母即可)。
- Export movie 输出电影。File->Export->Export movie…,保存。
- 确认以下输出设置:(是Flash 软件的默认设置)
- Flash version is Flash 8.
- Set Load order to Bottom up.
- The ActionScript version is 2.0.
- Protect the movie from import and compress it.
- Omit trace actions and don’t permit debugging. If you want to, you can generate a size report.
HMTL
在<head>里添加需要的CSS和JavaScript文件地址:
< link rel="stylesheet" href="sIFR-screen.css" mce_href="sIFR-screen.css" type="text/css" media="screen">
< link rel="stylesheet" href="sIFR-print.css" mce_href="sIFR-print.css" type="text/css" media="print">
<script src="sifr.js" mce_src="sifr.js" type="text/javascript"></script>
<script src="sifr-config.js" mce_src="sifr-config.js" type="text/javascript"></script>
—————
在Joomla中的使用方法为:
假设我把所有和sIFR相关的几个文件—— sIFR-screen.css, sIFR-print.css, sifr.js, sifr-config.js, 以及生成的.swf格式的flash swf文件保存在Joomla选用模版的文件夹下名为sIFR的文件夹里。
在使用模版的文件夹下的index.php文件的<head>里添加以下代码:
<!– begin sIFR –>
<link rel=”stylesheet” href=”<?php echo $this->baseurl ?>/templates/template_name/sIFR/sIFR-screen.css” type=”text/css” media=”screen” />
<link rel=”stylesheet” href=”<?php echo $this->baseurl ?>/templates/template_name/sIFR/sIFR-print.css” type=”text/css” media=”print” />
<script src=”<?php echo $this->baseurl ?>/templates/template_name/sIFR/sifr.js” type=”text/javascript”></script>
<script src=”<?php echo $this->baseurl ?>/templates/template_name/sIFR/sifr-config.js” type=”text/javascript”></script>
<!– end sIFR –>
本来应该是用相对地址没这么麻烦的,但是后来的flash文件无法寻觅到的插曲让我使用了和其他引用同样格式的Joomla特有的绝对地址,用来防止任何不可估算但皆有可能的错误。
JavaScript
在sifr-config.js 文件里,输入以下代码(这里假设是在使用cochin字体,并且在flash步骤里保存的.swf文件命名为cochin.swf):
var cochin = {
src: 'cochin.swf'
};
sIFR.activate(cochin);
sIFR.replace(cochin, {
selector: 'h1'
});
—————
在Joomla中的使用方法大同小异,特别值得注意的就是意外的flash位置的小插曲。虽然在使用说明上就已经特别交待最好使用绝对地址定位swf文件相对于要使用艺术字的页面的位置,但是还是一次次的迷失在其中了。最后不得以拿出了杀手锏级别的位置定义法——
src: ‘http://domain/joomla_root/templates/template_name/sIFR/cochin.swf’ ——这种方法虽然白了点,但至少绝对的保证了万无一失(我也是被逼无奈了)
选择器到是不算太难,对你的模版有所了解应该可以顺利找出来。
我所使用的几次需要艺术字的地方:top navigation, left navigation, blog title,这几处的选择器分别是 #header ul li, #left ul li, #main .leading h2, #main2 .leading h2。
关于在菜单上使用艺术字,受链接的影响,不能直接设置在tag <a>上,因为会毁了原来的链接,所以只能设置在<a>所在的的上一级选择器上了,然后在sifr-config.js 里配置其CSS样式,格式如下(效果是黑底白字,鼠标动作是字体变绿色):
sIFR.replace(cochin, {
selector: '#header ul li'
,css: [
'.sIFR-root { text-align: center; font-weight: normal; background-color:#000000; color:#FFFFFF; }'
,'a { text-decoration: none; }'
,'a:link { color: #FFFFFF; }'
,'a:visited { color: #FFFFFF; }'
,'a:hover { color: #009F91; }'
,'a:active { color: #009F91; }'
,'a:focus { color: #009F91; }'
,'.active a { color: #009F91; }'
]
});
由上面关于超链接<a>的问题的延续,CSS效果不能完美解决/恢复原有的CSS样式。问题有二:
- active,focus动作的CSS样式尽管设置了但没有被实现。
- 只能设置sIFR-root位置的背景色,因此鼠标动作改变背景颜色的操作没有办法实现。
CSS
最后在sIFR-screen.css 里定义字体样式,格式如下:
.sIFR-active h1 {
visibility: hidden;
font-family: Verdana;
line-height: 1em;
font-size: 18px;
}
其中line-height是为了避免显示出错,要保留。Joomla中的使用方式就不罗嗦了,跟这里一样,定义你替换的选择器样式即可。

