Cufon css3@font-face

为什么要使用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设定字体渲染的方法

1、通过Cufon.set方法设定

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

2、通过Cufon.replace方法设定

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

 

 缺点:

1、文本无法被选中

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

 

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

  

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。