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" [...]