line-height vertical align font-face

I have the following markup:

<div class="blockSection">
<h5>Title of the section</h5>
...
</div>

now, the h5 for the .blockSection has a fixed height and a background image, 开发者_开发百科40px. For aligning the text vertically i always set the line-height same as the height, since the text wont break in 2 or more lines. But the problem is i'm using a font with font-face and i doesnt want to aligning vertically in Firefox, Safari on Mac. In windows IE looks good.

Anybody know the trick to make it right, without applying different line-height for browsers ?

You might just be out of luck...outside of hacks to target different combinations of browsers & OS.

"There is no ideal line height that works equally well for all web fonts. Each typeface calls for a different default line height, depending on its design qualities — whether it’s condensed or wide, whether it has tight or loose letterspacing, whether its ascenders or descenders are long or short compared to the x-height etc." - Webfonts.info

If you licensed the font from Webfonts, they have a kit builder that enables you to fiddle with line-height options. "Bounding Box" worked for the one font I had there. More info here: http://webfonts.info//webfonts-know-how/part-3-line-height-options-kitbuilder

Another option that is better than conditional stylesheets, since the font may render differently across browsers & OS, you could try this jQuery plugin that enables you to detect combinations of browsers & OS and then apply a class to it. Not ideal but it's an option.

http://www.icavia.com/2010/09/solving-font-face-alignment-issues/

UPDATE: another option to try is the Font Squirrel Webfont Generator. If you have the rights to use the font in question, then use this generator in expert mode and be sure "Fix Vertical Metrics" option is checked.

One solution for vertical centering (in non IE browsers) is using display: table-cell and vertical-align: middle on your h5 .

It sounds like conditional comments would do the trick. Create an IE only stylesheet within one line-height and a main stylesheet with the line-height for the other browsers.

I know you don't want to set different line-heights for different browsers, but if IE is doing what you want and other browsers aren't, this is the best solution.