Firefox中的@ font-face垂直对齐问题

Question

Hi i have an issue with font which is rendering as like having a margin at the top and same font is working fine in all other browsers (I have tested in windows and ubuntu).

My problem seems to be like

And in other browsers

I have used font squirrel for generating font-face and here is the code that it has generated

@font-face {
    font-family: 'garrisons';
    src:url('../fonts/garrisons-regular-webfont.ttf');
    src: url('../fonts/garrisons-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/garrisons-regular-webfont.woff') format('woff'),
         url('../fonts/garrisons-regular-webfont.ttf') format('truetype'),
         url('../fonts/garrisons-regular-webfont.svg#garrison_sansregular') format('svg');
    font-weight: normal;
    line-height:30px;
}


@font-face {
    font-family: 'garrisonsb';
    src: url('../fonts/garrisons-bold-webfont.ttf');
    src: url('../fonts/garrisons-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/garrisons-bold-webfont.woff') format('woff'),
         url('../fonts/garrisons-bold-webfont.ttf') format('truetype'),
         url('../fonts/garrisons-bold-webfont.svg#garrison_sansbold') format('svg');
    font-weight: normal;
    line-height:30px;
}

What may be the possible solution for this? Thanks in advance.

Answer 1

Those different font formats you provided render differently in different browsers. For example, IE supports .eot whereas Chrome supports .ttf . The difference between browsers means that you will have to find a happy medium when it comes to providing solution for different browser variations.

So maybe add more of a bottom margin so it doesn't look foolish on one type of browser. Its an inexact process, but whatever result you think works best for all browsers is often the best route of action.