How to adjust font size using Cufon?

Question

I use compressed font in Cufon. When the page loads, my menu is too large and wraps. Cufon then replaces the font and it looks great. To reduce visual distraction, I want the font size to be smaller, and then Cufon resized the font when it was displayed.

Currently, the font size is set by the div containing the menu. Here is the CSS for the menu container:

.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;
}

The Cufon replacement code is as follows:

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

I tried to set the CSS font size to 12 pixels and then use the following Cufon code, but it does not work:

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

Does anyone know how to do this?

Answer 1

You can try using the set () method. I believe this works.

<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, ? - IE? , , div jQuery. - 200 , , .

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

CSS div, : none fade-in... , Javascript, - - js?

, Google : ? Google.

Answer 3

, CSS,

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