cufon，在网页上画出特殊字体-优快云博客

为什么80%的码农都做不了架构师？>>>

设计师们有时会使用特殊字体让网页更好看，但浏览器通常只支持Arial、Helvetica等通用字体。那么通常的解决办法就是将特殊字体做成图片。如果要动态生成文字内容怎么办？那也许只有使用CSS3的@font-face功能了……等下！其实还有cufon这个工具，可以帮我们在网页上”画”出特殊字体。

cufon的原理是将TTF字体转换成JavaScript代码，然后在需要特殊字体的地方创建一个<canvas>元素，将字体画出来。效果如下：

cufon的效果

使用方法也很简单，只需访问cufon，点击Download下载cufon-yui.js(目前版本为1.09i)。再点击Generator，上传你的字体文件，即可得到转换后的js文件（假设文件名为yourfont.font.js）。

然后在代码里引入这两个js文件，再写一点简单的代码：

<head>
<script src="cufon-yui.js"></script>
<script src="yourfont.font.js"></script>
<script>
Cufon.replace('h1', { color: '#333', textShadow: '2px 2px #ddd' });
</script>
</head>

这样h1的内容就被替换成了所需的字体。

更详细的讨论可以参考使用Cufon渲染网页字体。

转载于:https://my.oschina.net/cimu/blog/164756