inconsistency in rendering fonts between Firefox/Win and Safari/(Windows and Mac)
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 firef开发者_JAVA技巧ox and safari?
Is there a way here to force both browsers to behave the same?
any help or suggestion is appreciated - thanks in advance
Try specifying line-height: 1ex;
in your css.
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'.
精彩评论