typeface.js神器登场

很久以前就看到过typeface.js这个脚本的官方网站，挺有趣的，但那时候没时间弄也就不了了之了。

今夜咖啡作祟，我又在创作（好吧，跟着教程的也算）Wordpress的主题，所以到Google搜索了几个关键字，最后用font js搜出了typeface.js的网站，一看就知道是它了。

typeface.js是用来渲染网站字体的一个脚本，它与众不同之处在于不用图片或者flash来显示用户想要表现的字体，你可以正常地写HTML或者CSS，而浏览者浏览时就像本地真的有这种字体一样。它的处理流程很简单：首先载入typeface.js的代码以及所需要的字体，然后就像平常一样调用即可。

typeface.js是一个开放源代码的项目，欢迎你的捐款。它的代码将永远保持免费和开放。这其中包括typeface.js本身的代码以及用来转换字体的perl模块。

typeface.js支持多个平台，支持Firefox 1.5+，Safari 2+，IE 6+的浏览器。其他浏览器上效果可能会有些微的降低。比如那些用PDA浏览你的网站的用户，他们仍然能正常地看到你的文字内容，只是没那么好看罢了。而搜索引擎也不再需要依赖于ORC技术或者图片的alt属性来识别文字了。

typeface.js的显示效果出众，CSS2标准包括了文字排版方面的大量指令，然而浏览器的实现情况并不令人满意。我们的库致力于填补这个空白。尤其是，我们的库已经支持’font-stretch’（字体拉伸）属性，并提供了对于’letter-spacing’（字符间距）等属性更好的控制。

typeface.js仍待发展，这个脚本还有很大的提升和优化空间。例如，你可能已经发现把typeface.js用在博客标题和文章题目上表现优秀，但用在文章内容上速度就慢了许多。而且我们还没有实现:hover伪类选择器的相关功能，以及其他可能出现的缺点。

要使用typeface.js其实很简单，首先你要下载typeface.js库，在下载页面可以找到，然后你需要一套typeface.js依赖的字体文件，几个准备好的字体包可以在字体页面找到（那里也可以把TrueType或OpenType字体转换成htm文件，再把扩展名改成js即可）。然后在你的网站代码中做出如下式样的修改：

<html>
  <head>
    <!-- load any external stylesheets first -->
    <link rel="stylesheet" type="text/css" href="/style.css">
 
    <!-- then load the typeface.js library and typeface.js fonts -->
    <script src="typeface-0.14.js"></script>
    <script src="helvetiker_regular.typeface.js"></script>
  </head>
 
  <body>
    <!-- go ahead and specify typeface.js fonts with CSS -->
    <div class="typeface-js" style="font-family: Helvetiker">
      Text here in Helvetiker font...
    </div>
  </body>
</html>

这里有几件事你需要记住：

默认情况下，typeface.js会渲染标题元素中的文字（如h1，h2等），只要他们指定了使用相应的typeface.js字体。你要记住标题元素中的文字是默认加粗的，所以要么你在标题的样式中加入font-weight: normal，要么你就加载一个加粗版本的字体文件。
其他任何类型的HTML元素要想使用typeface.js渲染，必须把typeface-js加入其class属性中。如果想用的元素已经有一个class属性，比如
```
<div class="heading">
```
那么你可以这样把typeface-js加进去
```
<div class="heading typeface-js">
```
你必须先加载外部样式表，再加载typeface.js。否则，Firefox 3将不理会typeface.js绘出的文本。
一个不幸的消息，font-stretch属性只能用在inline CSS中。
某些情况下，在IE 7浏览器中你会发现typeface.js渲染的文本在网页渲染完毕后的几千分之一秒后才出现，产生一种“闪烁”的效果。一种避免此情况的方式是在body标签结束之前手动调用 _typeface_js.initialize()。
你也可以通过禁止脚本产生能被选中的文本来加速脚本的运行。在加载typeface.js后，你可以设置参数来禁用可选文本，像这样：
```
<script>_typeface_js.configure({ disableSelection: true })</script>
```