Cufón--使用任何你想用的字体

from:http://bbs.blueidea.com/thread-2956167-1-1.html

我们都非常的激动CSS3即将能够使用了,感谢浏览器的更新升级.所有的开发者能够使用省时的方式例如@font-face属性来实现非系统默认字体的使用.不过,非常不幸的是,至少近年来,我们至少也只能继续选择用脚本和flash来实现非系统默认字体的方法.幸运的是,一个新的方式Cufón, 让这个任务变得简单许多.

那究竟,我们该如何使用Cufón呢?

优点:
1)闪电般的速度.
2)比siFR快100倍的速度.
3)几分钟就可以运行了.

缺点:
1)依靠Javascript,如果没有Js的话,字体就会恢复系统默认字体 .
2)文字不可选
3)不能使用 hover状态来替换元素.



使用方法:
第一步:下载Cufón


访问Cufón's 站点,点击头部的下载按钮,保存在你的电脑上.



第二部:转换字体
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文件之前,这样才会有效果.


完成
相信或不相信?你已经完成了所有步骤.让人不可思议的短短几个步骤操作,你的站点就
可以使用任何你想使用的非系统默认字体啦.

你有什么想法呢?有更好的方法或其他类似的方法提供给我么?
可以下面留言 ^^





cufon -中文字体渲染实例2010-07-21 13:27Cufon 是一个用来替代 sIFR 框架，作为一种基于 JavaScript 的网页字体引入方案， Cufon 的核心功能是通过一个名为“cufon-yui.js” 的 JavaScript 类库，提供给开发人员的。在web开发中，经常面对的一种“冲突”，即“字体（Font Family）冲突”。　　

通常的这一冲突总是爆发于 Web 页面的设计者（Designer）和开发者（Coder）之间。在很多场合下，Web 页面的设计者都会倾向于在他们的页面设计稿中，为文字附加使用一些“特殊”的字体和特效，以此来展示他们卓越的设计能力。

比如设计一个公司的Logo，图片上的一些特殊字体是从ps字库中调出的，当然这些文字在图片上显示肯定是没有问题的，但是如果要在网页中用文本来显示这些效果，就是会让开发人员抓狂了，因为浏览器并不支持所有的字体，这种情况Cufon就会大显身手了。

Cufon 技术的实现策略其实就是以一定标准，在网页相关位置上“画”出了所需要显示的文字字符，并同时替换原先区域所需要显示的文字。 借助于浏览器所推出的专有页面绘画方案，如 VML、Canvas 和 SVG 等，来进行页面的绘画。

以下是一个用微软雅黑作为标题字体的渲染：http://www.cycoo.net/demo/cufon/demo_cn.htm

cufon 网页字体英文渲染演示：http://www.cycoo.net/demo/cufon/index.htm

另外强调一下, 字体生成工具是可以选择性的生成文字,以免js过大,特别是中文字体,一般用于标题等内容,则可以选择性的生成js,不必整个字库都生成