首页 > Web开发 > 详细

Cufon css3@font-face

时间:2014-01-14 21:46:53      阅读:604      评论:0      收藏:0      [点我收藏+]

为什么要使用Cufon

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

 

1、引入Cufon

需要页面引入“cufon-yui.js”的JavaScript类库

2、创建并引入字体文件

我们希望某一字体可以为Cufon类库所处理,要将使用其他标准描述的字体文件,转换为Cufon字体文件。

 在线工具:http://cufon.shoqolate.com/generate/

3、使用Cufon.replace方法对标记字体进行渲染

<script>
  Cufon.replace("p");
</script>

 

Cufon.replace 方法选择符参数值语法规范
value 渲染所有以value为名称的标记下文本
#value 渲染以value为标记的id属性值得标记下文本
.value 渲染所有class属性值为value的标记下文本
选择符联合 可以使用的联合符有空格(" "),大于号(">")等,相关含义则可参考CSS选择符联合的相关说明

 

Cufon常用配置项和CSS风格名称对照表
color color  
fontSize font-size 在Cufon配置项下使用时,仅允许使用px作为风格的单位
fontStyle font-style  
fontWeight font-weight  
fontStretch font-stretch CSS3风格,仅允许通过cufon配置项进行使用,如果在CSS文件中制定,则会被部分浏览器视为无效而忽略
letterSpacing letter-spacing  
textTransform text-transform  

 

 使用Cufon设定字体渲染的方法

bubuko.com,布布扣
1、通过Cufon.set方法设定

Cufon.set("color", "#FF0000");

2、通过Cufon.replace方法设定

Cufon.replace("#id1", {fontFamily : "Baroque Script"});
bubuko.com,布布扣

 

 缺点:

1、文本无法被选中

2、无法实现悬停变换效果

 

 来源:http://www.ibm.com/developerworks/cn/web/0911_zhuzh_cufon/

  

Cufon css3@font-face

原文:http://www.cnblogs.com/beng/p/3513799.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!