开发者

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

开发者 https://www.devze.com 2023-01-03 14:42 出处:网络
I have a css definition in the head of my page as follows: @font-face { font-family: \"ownfont\";src: url(\"../fonts/ownfont.ttf\");

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'.

0

精彩评论

暂无评论...
验证码 换一张
取 消

关注公众号