博客 - 铁克司雷

Oct

2010

Web font solution

个性化的时代，当前的通用web font已经不能满足在设计上追求超越的人了。

很多设计师采用各种漂亮、有趣的字体来协助设计，但是呢？在实现为页面的时候，由于大多数电脑的字体库中并没有这些字体，于是，developer不得不将多数内容类的文字应用为通俗字体，如Arial。可是页面呈现的效果与设计就会产生很大差距。原本龙飞凤舞的字，却被平凡的文字所代替了，于是有的 developer就会直接slice成一张图，以图片的方式来呈现。
这固然是一个方法，但还有没有其他好的方法呢？答案是肯定的，正因为需求的出现，现在逐渐有了各种应对设计字体的解决方案，比如将字体封装生成JS文件等。下面收集几个用过的：

http://code.google.com/intl/zh-CN/apis/webfonts/
Google推出的在线字体转换，灰常强大，你只需要在代码中加入对应字体的链接即可，如下：

<html>
  <head>
    <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine">
    <style>
      body {
        font-family: 'Tangerine', serif;
        font-size: 48px;
      }
    </style>
  </head>
  <body>
    <h1>Making the Web Beautiful!</h1>
  </body>
</html>

目前最大的缺点恐怕就是支持的字体有限，希望未来能够逐渐丰富他的字体库；

http://typeface.neocracy.org/

<script src="typeface-0.14.js"></script>
<script src="helvetiker_regular.typeface.js"></script>

<div style="font-family: Helvetiker">
	Text here in Helvetiker font...
</div>

将字体转换成为JS文件，直接调用；但并不一定总是有效；

http://onlinefontconverter.com/
在线字体转换，可以将字体上传并转换