利用Cufon技术渲染文字的简单示例
Cufon是一种能够根据指定的字体渲染文字的技术。今天试用了下,主要有几个步骤:
1、下载Cufon.js(http://cufon.shoqolate.com/generate/)
2、获取需要渲染效果的字体
这里我通过从http://sc.chinaz.com/info/140331289268.htm网址下载了Flower Bold字体。
3、根据字体获取相应的js文件
从http://cufon.shoqolate.com/generate/网址选择字体创建js文件
一直到底部生成js文件,这里通过Flower Bold字体生成的js文件为Flower_700.font.js。
4、使用Cufon.js和根据字体生成的js替换文字
1)首先,需要在html中引入两个文件:
<script type="text/javascript" src="../js/cufon.js"></script>
<script type="text/javascript" src="../js/Flower_700.font.js"></script>
<script type="text/javascript" src="../js/Flower_700.font.js"></script>
2)然后通过使用Cufon.replace渲染文字
<script type="text/javascript">
Cufon.replace("h2,h1,h6");
Cufon.replace("h1,h6",{color:"limegreen"});
</script>
Cufon.replace("h2,h1,h6");
Cufon.replace("h1,h6",{color:"limegreen"});
</script>
整个示例为:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Cufon Test</title>
<script type="text/javascript" src="../js/cufon.js"></script>
<script type="text/javascript" src="../js/Flower_700.font.js"></script>
<script type="text/javascript">
Cufon.replace("h2,h1,h6");
Cufon.replace("h1,h6",{color:"limegreen"});
</script>
</head>
<body>
<h1>The color is limegreen.</h1>
<h2>The color is black.</h2>
<h6>How about this font?</h6>
</body>
</html>
<html>
<head>
<meta charset="utf-8">
<title>Cufon Test</title>
<script type="text/javascript" src="../js/cufon.js"></script>
<script type="text/javascript" src="../js/Flower_700.font.js"></script>
<script type="text/javascript">
Cufon.replace("h2,h1,h6");
Cufon.replace("h1,h6",{color:"limegreen"});
</script>
</head>
<body>
<h1>The color is limegreen.</h1>
<h2>The color is black.</h2>
<h6>How about this font?</h6>
</body>
</html>
显示效果: