cufon，在网页上画出特殊字体

时间 2019-11-11

标签 cufon 网页画出特殊字体栏目 HTML 繁體版

原文原文链接

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

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

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

而后在代码里引入这两个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渲染网页字体。字体