27
Feb
Post on 13:27, February 27, 2008, by Sue Zhou

绝对的很小很好很强大的插件,太牛掰了!!!

可以在网页上以非图片形式显示特殊字体,可以复制粘贴,不影响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

  1. 打开 sifr.fla 文件,设置好字体及样式(粗体,斜体,正常等,不支持下划线的样式,每个样式写一个字母即可)。
  2. Export movie 输出电影。File->Export->Export movie…,保存。
  3. 确认以下输出设置:(是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样式。问题有二:

  1. active,focus动作的CSS样式尽管设置了但没有被实现。
  2. 只能设置sIFR-root位置的背景色,因此鼠标动作改变背景颜色的操作没有办法实现。

CSS

最后在sIFR-screen.css 里定义字体样式,格式如下:

.sIFR-active h1 {
visibility: hidden;
font-family: Verdana;
line-height: 1em;
font-size: 18px;
}

其中line-height是为了避免显示出错,要保留。Joomla中的使用方式就不罗嗦了,跟这里一样,定义你替换的选择器样式即可。

Category: 分享
You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.
Leave a Reply

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>