用Cufón将自定义字体转成JavaScript

2009 11 20 11:20 PM 2348次查看

分类：JavaScript 标签：JavaScript

今天看到一篇《在网站中使用自定义字体》，觉得很有趣，就去试了下Cufón，于是便有了这个例子（已删除）。
另外还可以去看acidsmile的blog，非常华丽。

它的原理就是将TTF字体转换成SVG格式，再转成VML（浏览器内置支持），再以JavaScript的方式展现出来。表现在HTML结构上，就是一个任意的DOM文本元素被替换成了canvas元素。附带的效果就是浏览者没法选择和复制该文本，但搜索引擎可以正常索引。
它支持主流浏览器，如IE 6+、Firefox 1.5+、Safari 3+、Opera 9.5+和Chrome 1.0+，因此兼容性也不必担心。

用法实际上也很简单，先下载Cufón这个JavaScript文件本身，接着去生成字体文件。
生成方式有2种，你可以去Cufón的字体生成页面，也可以下载Cufón源代码，部署在自己的PHP服务器上，然后访问generate目录。
生成时有2个勾记得选中：The EULAs of these fonts allow Web Embedding (without Adobe Flash)和I acknowledge and accept these terms。
生成时还能选择为哪些字符生成（选择的越多，生成的文件越大），此外还可以设定只能用于指定域，其他网站是不能盗用该字体的。
生成完毕后就会输出一个js文件，将它和Cufón一起载入就能使用了，例如：
<!DOCTYPE HTML>
<html>
	<head>
		<title>Let's fuck GFW</title>
		<style type="text/css">
			p {width: 574px; font-size: 100px; color: #36f; margin: 0 auto}
		</style>
		<script src="cufon-yui.js"></script>
		<script src="LTZapfino_Four_400.font.js"></script>
		<script>Cufon('p');</script>
	</head>
	<body>
		<p>Let's fuck GFW</p>
	</body>
</html>
更详细的用法就去看API文档吧。

0条评论 你不来一发么↓

    想说点什么呢？