inconsistency in rendering fonts between Firefox/Win and Safari/(Windows and Mac)

Question

I have a css definition in the head of my page as follows:

@font-face {
    font-family: "ownfont";src: url("../fonts/ownfont.ttf");
}

Then i give a css class to the body (on button click) which changes the font type from:

font-family: Verdana,Arial,Helvetica,sans-serif;

to

font-family: "ownfont",Verdana,Arial,Helvetica,sans-serif;

"ownfont" is a 4-character font where spaces and hypen will be shown in order to show some non-visual characters.

Firefox 3.6.3 shows everything as excepted (looks the same as before except for spaces and hypen), but Safari (on Mac and Win; Versions 4.0.5, 5.0) changes the heigth of my text lines (or at least it looks like that or as if a padding/margin has been increased - but nothing has been changed except for the font).

Why does this font setting yield to different results in firefox and safari?

Is there a way here to force both browsers to behave the same?

any help or suggestion is appreciated - thanks in advance

Answer 1

Try specifying line-height: 1ex; in your css.

Answer 2

If you know what font(s) you're going to be using it with, it might be simpler to remake your font to have metrics more like the others'.