利用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>


2)然后通过使用Cufon.replace渲染文字

<script type="text/javascript">
    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>

 

显示效果:

 

 

 


 

posted @ 2014-11-18 17:29  爱生活者wmmang  Views(242)  Comments(0Edit  收藏  举报