Question

我在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>

有谁知道怎么做？

Answer 1

您可以尝试使用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

虽然我很欣赏这个在6个月前被问过的问题，但是我遇到了这个类似的问题，并认为它可能值得回答。

Answer 2

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

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

不要忘记将该div的CSS设置为display：none，以使淡入效果正常... 当然，如果您的查看器已禁用Javascript，则不会显示任何内容 - 但您的网站访问者中有多少百分比已停用？

而且，担心您的Google排名显示：无？ Read more on Google Groups

Answer 3

我改变了我的css，如下所示

.cufon-active h1 {/ * for Cufon.replace（'h1'）* / font-size：3em; 颜色：＃FF0000; }

希望这有帮助。

如何用Cufon调整字体大小？

3 个答案: