cufon 在网页上使用任何你想用的字体2011-02-11 16:30:47| 分类： javascript | 标签：cufon js 字体 |字号大中小 订阅 我们都非常的激动CSS3即将能够使用了,感谢浏览器的更新升级.所有的开发者能够使用省时的方式例如@font-face属性来实现非系统默认字体的使用.不过,非常不幸的是,至少近年来,我们至少也只能继续选择用脚本和flash来实现非系统默认字体的方法.幸运的是,一个新的方式Cufón, 让这个任务变得简单许多.
那究竟,我们该如何使用Cufón呢? 优点: 1)闪电般的速度. 2)比siFR快100倍的速度. 3)几分钟就可以运行了. 缺点: 1)依靠Javascript,如果没有Js的话,字体就会恢复系统默认字体. 2)文字不可选 3)不能使用hover状态来替换元素. 使用方法: 第一步:下载Cufón：http://cufon./js/cufon-yui.js  访问Cufón's 站点：http://cufon./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./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文件之前,这样才会有效果. 完成 相信或不相信?你已经完成了所有步骤.让人不可思议的短短几个步骤操作,你的站点就可以使用任何你想使用的非系统默认字体啦. |
|
|
