sIFR网页字体替换技术

sifr阿宏在2005年翻译了一篇2004年的技术文稿 《如何以及何时使用sIFR》

先看一个案例, newlifeuniting.com ,该网站就通过sIFR(scalable Inman Flash Replacement),使用JavaScript+Flash+CSS将标题部分的字体,平滑消除了文本锯齿。而国内目前仍然有不少网站,在使用图片处理该环节的字体美化。

实现方法:

  1. 选择合适的SWF生成工具:
    http://ianpurton.com/sifr/ or http://www.sifrgenerator.com/wizard.html
  2. 原理及调用方法:
    通过生成的JS文件,sIFR.replaceElement(“h2″)替换掉自己网站中对应标签内的文字。当访问者不支持JS的时候(例如手机访问),样式表内的visibility: visible!important就不会生效。(题外话,虽然都是隐藏内容,但是display:none会把占用的空间抹掉,而visibility会保留他占用的空间。)
  3. 官方参考资料(文章底部有FLA源文件下载):
    http://www.mikeindustries.com/blog/sifr/

优缺点:

缺点:页面必须完全载入后,JavaScript才能替换文本。因此,在文本被替换为Flash内容时,会有一个短暂的闪烁。如果替换的内容过多,访问者网速较慢,页面反映会比较迟钝。所以最好只针对每页的主要标题采用该技术。另外在ie6浏览器下,sIFR区域内不支持鼠标滚轮。

优点:如果使用图片来做标题,修改费时费力;而且WebMarketingNow和Search Engine Academy根据长期测试研究认为,目前,三大主流搜索引擎Google, Yahoo!和MSN的搜索引擎排名算法规则中不再将图片ALT属性中的文本信息作为判断网页内容相关性的有效因素。(搜索引擎算法的资料信息为推测数据,不可全信,即使是真的,也随时有可能会做新的调整。)

相关日志

11 条评论 《sIFR网页字体替换技术》

  1. 好东西…学习下… :-P

    回复

  2. 这技术对于中文网站根本不适用。英文字母只有26个,怎么生成字库都不会超过200k。中文呢?最小的字库我测试过都要4M,用户怎么可能等待下载4M的字库呢?

    回复

    Gravatarcuikai Reply:

    sifr.fla源文件打开后,可以按”Embed” 按钮,选择需要包含进来的字符,然后在“Include these characters”中只输入特定的几个中文字。设置好后,选择”File > Export” ,将其保存为 fontname.swf,这样SWF的总体积就不会那么恐怖。

    一个企业的导航条,一般也就“公司简介”“产品简介”“联系我们”几个大标题,字数不会太多的。SWF控制到30K以内比较合适,越小越好。

    Gravatargoddy Reply:

    这个我确实没想到过,我明天试验一下。

  3. Gravatar古斯比德

    给出的例子站,速度受到影响,sIFR技术需要适当合理地运用,不过还是比较适合关注的好文章,请求转载!

    回复

    Gravatarcuikai Reply:

    传说莫拉克台风(这东西很强啊)引起德尔FNAL/RNAL海缆中断。访问国外网站都很龟速……
    文章可以随意转载,请以链接形式注明出处。

  4. 这个还是比较实用的

    回复

  5. [...] 字体使用是网页设计中不可或缺的一部分。经常地,我们希望在网页中使用某一特定字体,但是该字体并非主流操作系统内置的字体,这样用户在浏览页面的时候就有可能看不到真实的设计。美工设计师最常做的办法是把想要的文字做成图片,这样做有几个明显缺陷:1. 不可能大范围的使用该字体;2. 图片内容相对使用文字不易修改;3. 不利于网站SEO(主流搜索引擎不会将图片alt内容作为判断网页内容相关性的有效因素)。网络上有一些使用sIFR技术、或javascript/flash hack的方法,但一般实现较为繁琐,且有明显缺陷。下面要讲的是如何只通过CSS的@font-face属性来实现在网页中嵌入任意字体。 [...]

  6. [...] 在网页中嵌入任意字体的解决方案 2009年, 十二月 18thadmin 字体使用是网页设计中不可或缺的一部分。经常地,我们希望在网页中使用某一特定字体,但是该字体并非主流操作系统的内置字体,这样用户在浏览页面的时候就有可能看不到真实的设计。美工设计师最常做的办法是把想要的文字做成图片,这样做有几个明显缺陷:1. 不可能大范围的使用该字体;2. 图片内容相对使用文字不易修改;3. 不利于网站SEO(主流搜索引擎不会将图片alt内容作为判断网页内容相关性的有效因素)。网络上有一些使用sIFR技术、或javascript/flash hack的方法,但实现起来或繁琐,或有缺陷。下面要讲的是如何只通过CSS的@font-face属性来实现在网页中嵌入任意字体。 [...]

  7. 个人觉得cufon会比sifr好用!

    回复

  8. [...] 字体使用是网页设计中不可或缺的一部分。经常地,我们希望在网页中使用某一特定字体,但是该字体并非主流操作系统的内置字体,这样用户在浏览页面的时候就有可能看不到真实的设计。美工设计师最常做的办法是把想要的文字做成图片,这样做有几个明显缺陷:1. 不可能大范围的使用该字体;2. 图片内容相对使用文字不易修改;3. 不利于网站SEO(主流搜索引擎不会将图片alt内容作为判断网页内容相关性的有效因素)。网络上有一些使用sIFR技术、或javascript/flash hack的方法,但实现起来或繁琐,或有缺陷。下面要讲的是如何只通过CSS的@font-face属性来实现在网页中嵌入任意字体。 [...]

发表评论 (无需注册)

支持CTRL+ENTER快捷提交
崔凯的博客
Powered by WordPress | Theme by ck web design | TOP 顶部
Copyright © 崔凯的博客 All rights reserved. Valid XHTML & CSS. 京ICP备09029324号.