cufon网页渲染字体插件 附带六种字体
大家在浏览国外网站时可能会看到一些字体感觉像是图片但是保存的时候却保存不了附件，查看源文件又是文本。这就是一个字体渲染的技术在搞怪。下面介绍一种JS渲染字体的类库：Cufon
什么是 Cufon 呢？简单的说，Cufon 是一个用来替代 sIFR 框架，实现在网页中对文字字体进行渲染功能的纯 JavaScript 开源类库。
为什么要使用 Cufon
那么为什么要使用 Cufon 呢？这要从 Web 开发人员，所经常面对的一种“冲突”，即“字体（Font Family）冲突”开始讲起。
通常的这一冲突总是爆发于 Web 页面的设计者（Designer）和开发者（Coder）之间。在很多场合下，Web 页面的设计者都会倾向于在他们的页面设计稿中，为文字附加使用一些“特殊”的字体和特效，以此来展示他们卓越的设计能力。
当我们作为开发者时对于设计师这种效果是一张张的切图还是直接写字舍去其效果呢？俩者都不是很好的解决办法，现在Cufon这个家伙就发挥了重要作用。
如果你认为你的用户群用的都是高端浏览器，你可以直接用css3的方式引入字体,这样做的起码保证特殊字体的显示，但是没有了一些设计效果，得分：60分。
倘若你的用户群是杂牌军，那么就不能使用css3引入字体的方式了，就需要一种方法将特殊字体引入并且做一些去除毛边之类的效果。
先看下效果：
接下来介绍下Cufon使用方法
1.引入 Cufon 核心库
|
1
|
<script src="cufon-yui.js" type="text/javascript"></script> |
插件下载地址：https://github.com/Pomax/Font.js
2.创建并引入字体文件
这是使用 Cufon 技术的另一个关键所在。显然的对于初次接触 Cufon 技术的读者而言，这并不是一个容易理解的概念，那么什么是 Cufon 字体文件呢？
简言之 Cufon 字体文件，就是按照 Cufon 所提出的字体描述标准，创建形成的一种字体文件。
而和其他字体创建标准如 TrueType、OpenType 等不同的是，按照 Cufon 标准所形成的这一文件本身，就是一个标准的 JavaScript 脚本文件，这也就意味着其也可以通过 <script /> 标记引入到当前页面下，并交由 Cufon 类库进行解析和处理。
这真是一个“伟大”的创意！虽然其也面临着一个天然的障碍，那就是大部分的字体创建者并不会根据 Cufon 标准，来发布他们的字体文件。比如在上例中所使用的 Baroque Script 字体就是一种 TrueType 标准字体。因此显然的，如果我们希望某一字体可以为 Cufon 类库所处理，那么开发人员首先面临的问题，就是如何将使用其他标准描述的字体文件，转换为 Cufon 字体文件。这对大部分的开发人员而言当然是一个非常艰难的工作。
所幸的是 Cufon 已经为开发人员，准备了相应的在线工具 http://cufon.shoqolate.com/generate/，来实现这一转换过程。而目前工具所可以转换的字体标准则包括了 TrueType、FreeType2、OpenType、PostScript Font 等多种，应该说这几乎囊括了当前主流的一些字体创建标准，Cufon 的普适性由是可见一斑。
工具的使用其实并不复杂，笔者就不赘述了。以 Microsoft YaHei 字体为例，在使用这一工具产生了相应的 Cufon 标准的字体文件“Microsoft_YaHei_400.font.js”后，就可以通过如下代码所示的形式将其引入到 Web 页面中待用了。
这里提供一个中文版的在线转换工具：http://www.cufon-font.com/font-cufon.htm
|
1
|
<script src="Microsoft_YaHei_400.font.js" type="text/javascript"></script> |
在相关页面写入：
|
1
2
3
|
<script>Cufon.replace(['p'], { fontFamily: 'Microsoft YaHei' }); </script> |
更新文档：
2012年9月17日
1.解决微软雅黑字体“账”字显示不了的问题
2.新增字体:微软正黑
3.新增字体:楷体
4.新增字体:方正剪纸体
5.新增字体:张海山锐线体-简
6.新增字体:Georgia ps:适用于数字显示
7.重要更新，添加了微软正黑2500个常用的汉子
