cufon 在网页上使用任何你想用的字体

 

 

我们都非常的激动CSS3即将能够使用了,感谢浏览器的更新升级.所有的开发者能够使用省时的方式例如@font-face属性来实现非系统默认字体的使用.不过,非常不幸的是,至少近年来,我们至少也只能继续选择用脚本和flash来实现非系统默认字体的方法.幸运的是,一个新的方式Cufón, 让这个任务变得简单许多.
　　那究竟,我们该如何使用Cufón呢?
　　优点:
　　1)闪电般的速度.
　　2)比siFR快100倍的速度.
　　3)几分钟就可以运行了.
　　缺点:
　　1)依靠Javascript,如果没有Js的话,字体就会恢复系统默认字体.
　　2)文字不可选
　　3)不能使用hover状态来替换元素.
　　使用方法:
　　第一步:下载Cufón： http://cufon.shoqolate.com/js/cufon-yui.js

　　访问Cufón's 站点： http://cufon.shoqolate.com/generate/,点击头部的下载按钮,保存在你的电脑上.
　　第二步:转换字体
　　2-1 :从本地上传字体文件到站点上.(也可以一起上传粗体和斜体.)

　　2-2:接下来你要选择所包含的字符集,不要选择"choose all" .如果选择了全部的话,会让js文件变得很大.例如,我们也许不需要拉丁字符集.所以确保你自己需要的去勾选这些选项.如下,我选择了我自己需要的字符集.

　　2-3:Cufón允许你为字体使用指定到唯一的网址中去,这表示,其他的网站就不能盗用你花钱购买来的特殊字体,这全是为了安全版权考虑.

　　第三步:

　　3-1:接下来,我们就开始准备我们的项目.在电脑上新建一个文件夹.添加一个 index.html文件.把刚才下载和得到的两个js文件写入页面.
<script type="text/javascript" src="js/cufon-yui.js"></script>
<script type="text/javascript" src="js/Jokerman_400.font.js"></script>
　　现在我们要开始决定哪些元素需要使用到这些字体.你可以在下面的脚本中插入任何你想使用的标签元素.例如:
<script type="text/javascript">
Cufon.replace('h1');
</script>
　　那么你就可以在自己的页面中看到h1的字体变为刚才我上传的字体

　　3-2: 和往常一样,IE需要一些而外的小东西来避免它的与众不同,如果你在ie浏览器底下,你会发现在显示字体之前会有一点延迟.为了解决这个方法,我们插入以下脚本:
<script type="text/javascript"> Cufon.now(); </script>
　　第四步:
　　让我们想象一下也许你需要更加精确的控制你的元素,例如,也许你并不想整个站点中所有的h1都被替换了字体.只是希望在id=header中的所有h1被替换了字体.在cufon中没有自己的选择器写在内部.(这项功能被遗忘是为了尽可能的让cufon文件比较小).我们刚谈到这个缺陷的时候,好似 cufon就是一个失败的解决方法一样.不过,不要担心,我们有
　　另个两个非常好的解方案,来让cufon支持选择器的写法.
　　方法1Javascript:
　　如果你没有使用js框架在你的项目中,我们可以简单的使用下面的代码:
Cufon.replace(document.getElementById('header').getElementsByTagName('h1'));
　　上面这段代码可以读为"先找到id=header'的内容,然后在找到这个内容内所有的h1的标签.最后替换他们"
　　方法2jQuery:
　　在cufon脚本文件前插入下面的jQuery文件.
<script type="text/javascript" src=" http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="js/cufon-yui.js"></script>
<script type="text/javascript" src="js/Jokerman_400.font.js"></script>
　　然后
Cufon.replace('#header h1');
　　直接这样写替换.
　　这也是同样的简单.请注意,一定要把 jQuery文件写在 Cufon文件之前,这样才会有效果.
　　完成
　　相信或不相信?你已经完成了所有步骤.让人不可思议的短短几个步骤操作,你的站点就可以使用任何你想使用的非系统默认字体啦.