I am using a condensed font in Cufon. When the page loads, my menu is too wide and wraps. Then Cufon replaces the font and it looks fine. To reduce the visual distraction, I want to set the font size smaller and then have Cufon change the font size when it displays.
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 looks like this:
<script type="text/javascript">
Cufon.replace('.header_menu_block_col_menu ',
{ color: '#ffffff',
hover: {color: '#204966'}
} );
</script>
I've tried setting the CSS font size to 12px and then using 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
You could try using the set() method. I find that this works.
<script type="text/javascript">
Cufon.set('fontSize', '14px').replace('.header_menu_block_col_menu ',
{ color: '#ffffff',
hover: {color: '#204966'}
} );
</script>
Although the manual explicitly suggests not using the font size.