开发者

@font-face firefox mac only. Padding top and bottom on text

iam using @font-face css function to use custom fonts. They look grea开发者_StackOverflow社区t in all browsers (ie,chrome,safari, opera) on windows and mac apart from any version of firefox mac.

Basically, the font is adding padding above and below the font on all h1 h2 and p tags using this font on firefox mac only. however when using the same version of firefox on a windows machine, the font renders completely fine without any extra padding.

On all other browsers on mac and pc, the font renders completely fine without this extra padding. Its just on firefox mac!

Here is the @font-face css code ive been using, generated by font-squirrel using the recommended settings.

@font-face {
    font-family: 'TelegraficoRegular';

    src: url('telegrafico-webfont-webfont.eot');
    src: url('telegrafico-webfont-webfont.eot?iefix') format('eot'),
         url('telegrafico-webfont-webfont.woff') format('woff'),
         url('telegrafico-webfont-webfont.ttf') format('truetype'),
         url('telegrafico-webfont-webfont.svg#') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'TelegraficoRegular';

    src: url('telegrafico-webfont-webfont.eot');
    src: url('telegrafico-webfont-webfont.eot?iefix') format('eot'),
         url('telegrafico-webfont-webfont.woff') format('woff'),
         url('telegrafico-webfont-webfont.ttf') format('truetype'),
         url('telegrafico-webfont-webfont.svg#') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'TelegraficoRegular';

    src: url('telegrafico-webfont.eot');
    src: url('telegrafico-webfont.eot?iefix') format('eot'),
         url('telegrafico-webfont.woff') format('woff'),
         url('telegrafico-webfont.ttf') format('truetype'),
         url('telegrafico-webfont.svg#webfontRUJiw7XW') format('svg');
    font-weight: normal;
    font-style: normal;

}

this is an example of the css i've been applying to the h1 h2 tags

#logo h1 { 
font-family:'TelegraficoRegular';
font-size:60px;
margin:0;
padding:0;

}

Even with stating margin:0 and padding:0 it still adds padding or something on top and bottom but just in firefox mac.

its very baffling since its on one browser on one platform.When if it was the problem of the font file you would expect to see the problem replicated in other browsers.

I would really appreciate any help. Thank-you

Jack

0

上一篇:

下一篇:

精彩评论

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

最新问答

问答排行榜