Ross Wan's World!

Python, Ajax, PHP and Linux.

Posts Tagged ‘图形文本’

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 »