Ross Wan's World!

Python, Ajax, PHP and Linux.

Archive for the ‘HTML’ Category

ie7-js:解决 IE 兼容性问题

Posted by Ross Wan 于 2008/11/17

DIV + CSS 的网页布局早已成为一种趋势,随着 Web2.0 的流行,DIV +CSS 更加势不可挡。虽然 DIV + CSS 布局有着诸多的优势,但因为浏览器之间的不兼容,尤其是 IE 与 W3C 的不兼容,导致使用 DIV+ CSS 精准布局困难重重。ie7-js 项目就是为了解决 IE 浏览器的兼容问题而诞生的!

ie7-js 项目其实只是一个 Javascript 库,它志在使 IE 浏览器与 W3C 标准更加兼容,适用于 IE5 至 IE7 一系列的浏览器。它修复了 IE 在 HTML 和 CSS 中的诸多问题,并使 PNG 图片可以在 IE6、IE6正确显示。ie7-js 目前版本是 2.0 beta 3。

下载地址:

使用方法

在网页的 Head 标签里加入以下代码:

<!--[if lt IE 8]>
<script src="IE8.js" type="text/javascript"></script>
<![endif]-->

注意地方

关于 ie7-js 修复 PNG 图片的问题,它只会修复命名为*-trans.png 的图片。而且透明的图片不能平铺在背景上,也不能在 CSS 里使用 position 来定位。

Posted in Ajax, HTML, Javascript | Tagged: , , , , , , | Leave a Comment »

typeface.js: 替代 sIFR

Posted by Ross Wan 于 2008/10/28

定义 Web 页上的文本字体,但可能因客户端浏览器并没有安装相应的字体,而达不到相应的效果,这时,可以使用图片文本来替换,而更流行的做法是使用 sIFR 技术。sIFR 基于 Flash,将字体事先嵌入 SWF 文件,并可配合 Javascript、CSS 渲染网页的文本字体。因为 Flash 的缘故,如果一个页面有太多的 Flash 时,不可避免令页面有迟缓的感觉。而且,有一部分用户是将 Flash 作为广告来屏蔽掉的。如何不使用 Flash 而想要达到同样的效果呢?typeface.js 是一个不错的替代!

typeface.js 是一个还在开发中的开源项目。类似于 sIFR,意在网页上显示图形文本,但不使用 Flash!typeface.js 是使用浏览支持的矢量图形来绘画文本的,如 Firefox、Safari、Opera 上的 SVG,IE 上的 VML。typeface.js 是跨平台的,它适用于 Firefox 1.5+、Safari 2+、Internet Explorer 6+ 等浏览器。而且显示的图形文本可被搜索引擎搜索到。在支持 <canvas> 的浏览器上,图形文本还可以被用户选择、复制。

用法流程

下载 typeface.js 文件

转换 typeface.js 字体

在上面的页面可以将系统的指定字体转换为 typeface.js 字体。但需要注意的是,转换前会对字体的版权信息进行判别,只有授版的字体才能进行转换!

成功转换的话,会生成一个 fontname.typeface.js 的文件。

示例代码

<html>
  <head>

<!-- load any external stylesheets first -->

    <link rel="stylesheet" type="text/css" ref="/style.css">


<!-- then load the typeface.js library and typeface.js fonts -->

    <script type="text/javascript" src="typeface-0.10.js"></script>
    <script type="text/javascript" src="helvetiker_regular.typeface.js"></script>
  </head>

  <body>

<!-- go ahead and specify typeface.js fonts with CSS -->

    <div class="myclass typeface-js" style="font-family: Helvetiker">
      Text here in Helvetiker font...
    </div>
  </body>
</html>

只要引入 typeface.js 以及相应的 typeface.js 字体(如上面的 helvetiker_regular.typeface.js),并为文本的 style 添加 typeface-js class。一切就是这样简单 :)

注意

  • 如果要引入外部的 CSS 样式文件,必须在加载 typeface.js 之前。否则 Firefox3 可能在 typeface.js 绘画文本时不会应用那个样式。
  • fonts-stretch 属性只能在 inline CSS 才有效。
  • 在 IE7 上,可能会出现类似 sIRF 的闪烁问题。解决方法是在 </body> 标签前调用 _typeface_js.renderDocument() 。

参考资料

Posted in Ajax, HTML, Javascript | Tagged: , , , , | Leave a Comment »