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/