zoukankan      html  css  js  c++  java
  • 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/

      

  • 相关阅读:
    测试如何发挥更大的价值?聊聊测试左移和右移
    Cocos Creator性能调优
    跨域问题产生的原因和解决方法
    tornado部署
    tonado
    MySQL binlog
    grpc
    nextjs中的懒加载
    前端低代码-少写代码实现灵活需求
    MySQL中的锁
  • 原文地址:https://www.cnblogs.com/beng/p/3513799.html
Copyright © 2011-2022 走看看