如何使用 Cufon 调整字体大小？答案

【问题标题】：How to adjust font size with Cufon?如何使用 Cufon 调整字体大小？
【发布时间】：2011-06-25 21:27:45
【问题描述】：

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

有人知道怎么做吗？

【问题讨论】：

这样做的另一个原因是在禁用 javascript 时使网站看起来正确。

标签： cufon

【解决方案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

【讨论】：

正是我需要找到的，虽然在我的情况下，我只需要重新调整大小并防止任何人挣扎，你只需要：<script type="text/javascript"> Cufon.set('fontSize', '14px').replace('.selector'); </script>
我有多个 cufon 替换实例，只需要使用 Cufon.replace('#my_div p', { fontFamily: 'MyFont', fontSize:'18px' }); 在其中一个（css 无效）上指定字体大小更改，否则所有 cufon 实例都会受到影响。

【解决方案2】：

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

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

不要忘记将该 div 的 CSS 设置为 display:none 以使淡入工作... 当然，如果您的浏览器禁用了 Javascript，那么什么都不会出现——但是您网站的访问者中有多少百分比禁用了 js？

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

【讨论】：

【解决方案3】：

我做了它改变我的CSS如下

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

【讨论】：