3

我在 Cufon 中使用压缩字体。当页面加载时，我的菜单太宽并且换行了。然后Cufon替换了字体，看起来还不错。为了减少视觉干扰，我想将字体大小设置得更小，然后让 Cufon 在显示时更改字体大小。

目前字体大小由包含菜单的 div 设置。这是菜单容器的 CSS：

.header_menu_block
{
    display: block;
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
    margin-top: 3px;
    /*margin-left: 238px;  ie 6 can't handle, see margin block below*/
    float: left;
    text-align: left;
    font-weight: normal;
    font-size: 14px;
    color: #FFFFFF;
    height: 41px;  
    width: 991px;
}

Cufon 替换代码如下所示：

<script type="text/javascript">
    Cufon.replace('.header_menu_block_col_menu ', 
    { color: '#ffffff', 
      hover: {color: '#204966'}
    } );
</script>

我尝试将 CSS 字体大小设置为 12px，然后使用以下 Cufon 代码，但它不起作用：

<script type="text/javascript">
    Cufon.replace('.header_menu_block_col_menu ', 
    { color: '#ffffff', 
      hover: {color: '#204966'},
      font-size:'14px'
    } );
</script>

有谁知道如何做到这一点？

4

3 回答 3

6

您可以尝试使用 set() 方法。我发现这行得通。

<script type="text/javascript">
    Cufon.set('fontSize', '14px').replace('.header_menu_block_col_menu ', 
    { color: '#ffffff', 
      hover: {color: '#204966'}
    } );
</script>

尽管手册明确建议不要使用字体大小。

https://github.com/sorccu/cufon/wiki/API

于 2011-08-24T14:18:32.107 回答
0

我做了它改变我的CSS如下

.cufon-active h1 { /* for Cufon.replace(‘h1′) */
  font-size: 3em;
  color: #FF0000;
}
于 2014-05-04T17:12:37.840 回答
0

让我猜猜，你永远不会在非 IE 浏览器中看到底层字体，对吧？非cufon首先出现在IE中？我一直在处理同样的问题，我通过使用 jQuery 让带有文本的 div 淡入视图来解决它。淡入淡出时间可以设置得非常快——在这个例子中为 200 毫秒，我认为你可以让它淡入更快。

 $(window).load(function(){$(".header_menu_block_col_menu").fadeIn(200);});

不要忘记为该 div 设置 CSS 以显示：none 以使淡入工作...当然，如果您的查看器禁用了 Javascript，那么什么都不会出现 - 但是您网站的访问者的百分比是多少js禁用了吗？

而且，担心您的 Google 排名显示：无？阅读更多关于谷歌网上论坛。

于 2011-02-12T16:37:28.933 回答