css - 为什么我的自定义字体在某些浏览器中有位置偏移？

Question

在我的网站 www.monkey-touch.com 上工作时，我开始在标题和其他几个地方使用自定义字体。它看起来很棒，而且由于 font-squirrel 它可以在所有浏览器上运行。

但是，后来我意识到在某些浏览器中呈现的字体不同。 Chrome、Opera 和 Safari 都使自定义字体略高于其他字体。这不是什么大问题，但在尝试添加另一个页面时 http://monkey-touch.com/sandbox/products.php使用大尺寸的自定义字体，偏移量会变大到非常麻烦的程度，因为文本呈现在 div 之外。

请注意，该问题显然与其他 div 的错误 css 样式无关，因为即使在没有其他 div 的情况下在 body 标记中渲染字体也有偏移，如下所示:http://monkey-touch.com/Sandbox2/

谁能告诉我这是为什么以及解决该问题的最佳方法是什么？

我的 font-face 的 CSS 是:

@font-face {
font-family: 'Bebas';
src: url('bebas-webfont.eot');
src: url('bebas-webfont.eot?#iefix') format('embedded-opentype'),
     url('bebas-webfont.woff') format('woff'),
     url('bebas-webfont.ttf') format('truetype'),
     url('bebas-webfont.svg#Bebas') format('svg');
font-weight: normal;
font-style: normal;

提前致谢。

Answer 1

我弄明白了，它很奇怪，由两部分组成。

1) 我从 font-squirrel 那里得到的 .ttf 和 .eot 不好。从字体站点取回原始 .ttf 并将其转换为 .eot 是正确翻译所必需的。我不知道这是否真的是 font-squirrel 的错，因为翻译的差异看起来非常随意和奇怪，另见第 2 点)。

2) 从 css 中删除 .woff 条目。添加 .woff 只是为了安全，我不确定它是否被任何人使用，但似乎所有浏览器仍能正确呈现它。

这看起来很奇怪，因为所涉及的浏览器都使用相同的 .ttf(除了 IE8 及以下使用 .eot 的浏览器)但渲染方式不同。还必须删除 .woff，为什么？虽然我已经解决了我的问题，但它似乎仍然是一个相当随机和奇怪的问题。如果有人对此有更多了解，我很想知道。

我希望这个问题对其他人有用。 font-face 在易于使用方面还有很长的路要走，浏览器应该更加谨慎地遵守它。