0

嗨，我有一个字体问题，它的渲染就像在顶部有边距一样，并且相同的字体在所有其他浏览器中都可以正常工作（我已经在 windows 和 ubuntu 中进行了测试）。

我的问题似乎是

在此处输入图像描述

在其他浏览器中

在此处输入图像描述

我已经使用字体松鼠来生成字体，这是它生成的代码

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

可能的解决方案是什么？提前致谢。

4

1 回答 1

0

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

所以可能会添加更多的底部边距，这样它在一种类型的浏览器上就不会显得愚蠢。这是一个不精确的过程，但是您认为最适合所有浏览器的任何结果通常都是最佳的行动途径。

于 2013-07-13T11:12:10.640 回答