Question

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

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

请注意，问题显然与其他div的错误css样式无关，因为即使在body标签中呈现字体而没有其他div也有偏移，如下所示：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本身对于正确的再现是必要的。我不知道这是否真的是字体松鼠的错，因为引渡的差异看起来非常随意和奇怪，也见第2点。

2）从css中删除.woff条目。 .woff只是为了安全而添加，我不确定是否所有浏览器都使用了它，但似乎所有浏览器仍然正确地渲染它。

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

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

Answer 2

问题是由于浏览器否定计算精确的字形边界（为了提高性能而完成）。

此问题的解决方案是在CSS中添加一行文字：

text-rendering:optimizeLegibility;

这一行可以添加到需要它的div的CSS中，这样就不会对页面的其余部分进行额外的处理。

Answer 3

您需要指定行高。尝试

body,html
{
    line-height: 18px; /* or whatever height you want */
}

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

3 个答案: