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

Question

嗨我有一个字体的问题，渲染就像在顶部有一个边距，相同的字体在所有其他浏览器中工作正常（我在Windows和ubuntu中测试过）。

我的问题似乎就像

在其他浏览器中

我使用font squirrel生成font-face，这里是生成的代码

@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;
}

可能的解决办法是什么？ 提前谢谢。

Answer 1

您提供的不同字体格式在不同浏览器中的呈现方式不同。例如，IE支持.eot，而Chrome支持.ttf。浏览器之间的区别意味着在为不同的浏览器变体提供解决方案时，您必须找到一个快乐的媒介。

因此可能会添加更多的底部边距，因此在某种类型的浏览器上看起来并不愚蠢。这是一个不精确的过程，但无论你认为哪种结果最适合所有浏览器通常都是最好的行动方式。