本博客日IP超过2000，PV 3000 左右，急需赞助商。
极客时间所有课程通过我的二维码购买后返现24元微信红包，请加博主新的微信号：xttblog2，之前的微信号好友位已满，备注：返现
受密码保护的文章请关注“业余草”公众号，回复关键字“0”获得密码
所有面试题(java、前端、数据库、springboot等)一网打尽，请关注文末小程序
腾讯云】1核2G5M轻量应用服务器50元首年，高性价比，助您轻松上云
cufon-yui.js 是一个字体文件，在国外使用的比较多，而国内的用户很少有人使用。
Cufon 字体文件，就是按照 Cufon 所提出的字体描述标准，创建形成的一种字体文件。而和其他字体创建标准如 TrueType、OpenType 等不同的是，按照 Cufon 标准所形成的这一文件本身，就是一个标准的 JavaScript 脚本文件，并交由 Cufon 类库进行解析和处理。
常见的 WordPress 中就有cufon-yui.js 插件，专门用来处理字体。
什么是 Cufon
Cufon 是一个用来替代 sIFR 框架，
实现在网页中对文字字体进行渲染功能的纯 JavaScript 开源类库(cufon-yui.js)。
为什么要使用 Cufon
在web开发中，经常面对的一种“冲突”，即“字体（Font Family）冲突”。
比如设计一个公司的Logo，图片上的一些特殊字体是从ps字库中调出的，当然这些文字在图片上显示肯定是没有问题的，但是如果要在网页中用文本来显示这些效果，就是会让开发人员抓狂了，因为浏览器并不支持所有的字体，这种情况Cufon就会大显身手了。
类似的js库
通过 CSS3 标准下的 @font-face 属性来指定和引入非缺省字体
使用cufon-yui.js库进行渲染
Google font 或者 Google API
下面是 cufon-yui.js 所支持的浏览器
|
Cufon |
IE（≥ 5） Firefox（≥ 1.5）Opera（≥ 9.5）Safari（≥ 3）Google Chrome（≥ 1.0） |
|
@font-face |
IE（≥ 4，仅支持 OpenType）Firefox（≥ 3.5） Opera（≥ 10.0） Safari（≥ 3.1） |
Cufon实现原理
Cufon 技术的实现策略其实就是以一定标准，在网页相关位置上“画”出了所需要显示的文字字符，并同时替换原先区域所需要显示的文字。
借助于浏览器所推出的专有页面绘画方案，如 VML、Canvas 和 SVG 等，来进行页面的绘画。
Cufon 用法
引入 Cufon 核心库。
<script src="cufon-yui.js" type="text/javascript"></script>
引入 Cufon 字体文件。
<script src="Baroque_Script_400.font.js" type="text/javascript"></script>
在完成了上述的两项准备工作后，事实上使用 Cufon 类库来实现对字体的渲染是非常简单的，这仅仅牵涉到了 Cufon 类库所提供的一个核心方法，即 Cufon.replace 方法。
<script>
Cufon.replace('p');
</script>
其中参数值“p”表示，在本例中 Cufon 将对整个 Web 页面下所有 <p /> 标记对象下的文本，实施字体渲染处理。
下表是Cufon.replace 方法选择符参数值语法规范（部分）。
| 语法 | 说明 |
|---|---|
| value | 渲染所有以 value 为名称的标记下文本 |
| #value | 渲染以 value 为标记的 id 属性值的标记下文本 |
| .value | 渲染所有 class 属性值为 value 的标记下文本 |
| 选择符联合 | 可以使用的联合符有空格（“ ”），大于号（“>”）等，相关含义则可参考 CSS 选择符联合的相关说明 |
有兴趣的朋友可以观看我的这篇文章《jQuery+CSS3实现相册拼图效果》，该文章实例中就应用到了cufon-yui.js。
最后，欢迎关注我的个人微信公众号：业余草（yyucao）！可加作者微信号：xttblog2。备注：“1”，添加博主微信拉你进微信群。备注错误不会同意好友申请。再次感谢您的关注！后续有精彩内容会第一时间发给您！原创文章投稿请发送至532009913@qq.com邮箱。商务合作也可添加作者微信进行联系！
本文原文出处：业余草： » cufon-yui.js 教程