如何用Cufon调整字体大小？

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

Answer 2

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

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

不要忘记设置要显示的 div 的 CSS：none 以便淡入正常工作...
当然，如果您的查看器禁用了 Javascript，则不会显示任何内容 - 但是您网站的访问者禁用 js 的百分比是多少？

并且，担心你的 Google 排名与显示：无？ 详细了解 Google 网上论坛。

Answer 3

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

.cufon-active h1 { /* for Cufon.replace(‘h1′) */
  font-size: 3em;
  color: #FF0000;
}