Typeface.js：一种潜在的替换sIFR的技术

Dion Almaer说道：感谢Nexus，我发现了一个新的项目，名为：typeface.js，这个项目提供了一个字体的解决方案，你能使用任何字体显示，不管客户端是否安装了这种字体，而且不使用Flash（sIFR使用Flash）。

typeface.js并不使用flash或者图片，只是直接展示你希望使用的图形化字体，你能使用typeface.js和写普通HTML和CSS代码，就像你的访问者在本机拥有这种字体一样。这是一个正在发展的项目，但是已经拥有足够的功能来渲染图形化字体。

typeface.js主页：http://typeface.neocracy.org/

加载typeface.js库和一些typeface.js字体，就能象这样使用：

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

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

<div class="myclass typeface-js" style="font-family: Helvetiker">

        Text here in Helvetiker font...

</div>

点击这里查看范例：http://typeface.neocracy.org/examples.html ，例子展示解决方式和CSS集成良好。

同时typeface.js支持使用canvas和VML，字体显示效果相当棒。




附sIFR介绍：

sIFR表示scalable Inman Flash Replacement，即“可伸缩Inman Flash替换”技术。是由Mike Davidson在IFR方法的基础之上扩展的一种技术。它通过Flash + JS + CSS联合实现在不替换页面中文本元素的情况下，对文本进行更为细腻准确的效果渲染。
　　
使用sIFR你可以任意定义WEB中的文本字体，即便是客户端浏览器未安装的字体。sIFR使用Flash渲染字体效果，可以平滑消除文本锯齿，你可以像使用用CSS控制文本一样轻松得到各种文本效果。

sIFR技术实现原理
　　基于Flash允许将字体嵌入SWF文件，所以事先将字体加载并生成Flash的SWF文件。然后通过JS控制进行页面文本的二次渲染。实现的方法是加载JS文件，通过JavaScript对Web页面进行搜索，找到设定元素或者设定类名的元素中的所有文本。然后JavaScript将文本重新渲染并在最终浏览页面上输出成为一个小的Flash文件。并且在此渲染过程中并不需要为每段文本创建一个单独的Flash文件，而是将被渲染的文本放回到一个重复的Flash文件中。因此，触发图像替换所要做的只是添加一个类，Flash和JavaScript会完成余下的工作。通过编写JS文件和CSS控制，可以在只调用同一个Flash的情况下实现对多行文本进行多种字体大小，字色的复杂表现。因为它并没不是文本的替换，所以文本在页面中仍然可以选中，复制。甚至可以重新被CSS定义。

以上介绍来自baidu