14
Nov
Post on 13:09, November 14, 2009, by Sue Zhou

最近两个项目由于客户的吹毛求疵和自己的强迫症并发而砸了整整两天时间在IE6的美化方面,时间没白费,经验教训皆有。以下分享的一些Tips纯属个人观点:

最好的PNG fix Javascript—- unitPngFix.js

官方网站 (http://labs.unitinteractive.com/unitpngfix.php)
试过十多个不同版本的Png fix,各自的优缺点都很明显,推荐的这个版本至今依然在缓慢而持续的更新着。除了大家都会的修正<img>里的PNG图片,选用他家产品的几个主要理由为:

  1. 修复PNG图片且不改变原有图片的尺寸,不会出现拉伸图片的情况
  2. 可修复PNG格式的背景图片(尽管对于重复属性的背景图片还是会有不同程度的bug,但已经可以简单的通过更改背景图片等简单方法解决)
  3. 可以全局修复,也可以仅修复指订图片(via class=”unitPng”)

最好用的字体替换程序 —- Cufón

官方网站(http://cufon.shoqolate.com/generate/)

我到今使用过三种字体替换程序:sIFR, FLIR (Facelift image replacement), 和现在选择的Cufón。下面是各程序的比较:

sIFR FLIR Cufon
编写语言 Flash, ActionScript, JavaScript PHP, JavaScript JavaScript
替换 生成swf文件 以单个字母为单位的图片,保存在服务器的cache文件夹内 以单词为单位的图片
配置 配置部分分为js config和css style两部分,用起来其实有点复杂 下载解压后乍一眼看去很复杂,有很多文件(夹),配置文件不难,但有些繁琐。 配置异常简单
优点 不需要独立的字体文件,支持font suitcase这类字体文件包 由于他是把整个字体文件上传到服务器中的,所以对于像中文这类字体文件较大的“大”字体的支持性较好。 文件小,配置简单,对IE6的天然支持性好
缺点 1) load页面时可以看到视觉上明显的字体替换过程──一个明显的页面跳跃。 2)不能直接读取CSS文件,需要在配置文件中另外设置。 1)如果替换的地方比较多会在服务器上生成一堆垃圾缓存图片,访问量如果大的话会占空间。2)生成的字体和原字体很近似,但是不相同,视觉上感觉比较“脆”,字母和字母之间的间距有的较正常略大。对于line-height等CSS属性的支持性还有待提高。 1)和unitPngFix的全局修复功能有冲突 2)目前只支持TTF,OTF类的单个字体文件,不支持字体包 3)对于中文这种字体文件过大的字体,上传生成JS过程会失败。

对于cufon和unitPngFix全局修复冲突的解决办法

  • 对要在IE6中需要修复的图片或背景图片所在的容易中添加(class=”unitPng”)。
  • 由于unitPngFix默认是全局修复,为了避免某一页面中没有需要修复的图片,在footer里(或者其他任何不显眼,不影响布局的地方)添加一张5px×5px左右大小的空白png图片,并添加(class=”unitPng”)。
Category: 分享  Tags: , ,
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.
19 Responses
  1. ffffff says:

    IE6….不支持CSS2…TMD

  2. Sue Zhou says:

    不要怪IE6,它太老了。
    但是IE7和8不支持CSS3才该骂

  3. fffff says:

    怪IE不能自动升级吧

  4. Sue Zhou says:

    我说,你丫咋每回提交的email地址都不一样呢,你最近在研究概率事件吗??=_=

  5. lovegermany says:

    实在是专业人士啊。。。

  6. fffff says:

    因为我换了台电脑,我的自己输入啊……

    其实我的有效mail是 meteorafhd@gmail.com,就Msn那个

  7. Sue Zhou says:

    某狮,隔行如隔山呀,你念叨你的那一套我也是大眼瞪小眼的说。。

    某F,我当然知道你每回填的email地址都是随手打的,总不会还有人总跟F字母较劲吧^^

  8. fffff says:

    是啊是啊 我是大F 美丽的大F 哈哈哈哈
    把email验证去了吧 哈哈哈哈

  9. 开心凡人 says:

    不用6了,用上8了,呵呵

  10. Jack.zhang says:

    FLIR不支持中文?还是我的server有问题?我找遍全球都找不到答案,
    该变成中文的字体,变成日文,不知你有没遇到过?

  11. Jack.zhang says:

    太喜欢FLIR这个东西了,都到日文了,就差那么一点,预哭无泪,拜托一定要帮我.

  12. Jack.zhang says:

    另外,你网站上的中文字体是用哪个实现的?

  13. Sue Zhou says:

    回楼上,FLIR支持中文,我测试中很顺利。如果显示成日文可以试着查查你的配置文件。

    我这个网站上的应该是用SIFR实现的。只导入了我需要的十几个中文字,否则SWF文件就太大了影响load速度。

    中文字库CUFON的支持不太好,主要中文字体文件太大(一般都超过2M,上传不到他的网站上去)

  14. Jack.zhang says:

    你测试的时候用的是windows还是linux

  15. Jack.zhang says:

    还有你用那个版本的FLIR,另外是不是要先把字体安装到系统

  16. Sue Zhou says:

    local serve是MAC
    test live server是WIN
    因为字体变脆只试用了两天就换了,没有试linux server。

    不需要安装字体,上传即可。

  17. Jack.zhang says:

    新的不是变脆了,是连在一起的,有空试一下

  18. Sue Zhou says:

    呵呵,最近在度假中,有空我再试试,如果FLIR不改变字体这个是我遇到的最好的中文字体替换程序。

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>