cufon-yui.js 教程

HTML5 herman 653浏览 0评论
公告:“业余草”微信公众号提供免费CSDN下载服务(只下Java资源),关注业余草微信公众号,添加作者微信:xttblog,发送下载链接帮助你免费下载!
本博客日IP超过1800,PV 2600 左右,急需赞助商。
极客时间所有课程通过我的二维码购买后返现24元微信红包,请加博主新的微信号:xttblog,之前的微信号好友位已满,备注:返现
所有面试题(java、前端、数据库、springboot等)一网打尽,请关注文末小程序
视频教程免费领

cufon-yui.js 是一个字体文件,在国外使用的比较多,而国内的用户很少有人使用。

Cufon 字体文件,就是按照 Cufon 所提出的字体描述标准,创建形成的一种字体文件。而和其他字体创建标准如 TrueType、OpenType 等不同的是,按照 Cufon 标准所形成的这一文件本身,就是一个标准的 JavaScript 脚本文件,并交由 Cufon 类库进行解析和处理。

常见的 WordPress 中就有cufon-yui.js 插件,专门用来处理字体。

什么是 Cufon

Cufon 是一个用来替代 sIFR 框架,

实现在网页中对文字字体进行渲染功能的纯 JavaScript 开源类库(cufon-yui.js)。

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)!可加QQ1群:135430763(2000人群已满),QQ2群:454796847(已满),QQ3群:187424846(已满)。QQ群进群密码:xttblog,想加微信群的朋友,之前的微信号好友已满,请加博主新的微信号:xttblog,备注:“xttblog”,添加博主微信拉你进群。备注错误不会同意好友申请。再次感谢您的关注!后续有精彩内容会第一时间发给您!原创文章投稿请发送至532009913@qq.com邮箱。商务合作可添加助理微信进行沟通!

本文原文出处:业余草: » cufon-yui.js 教程