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

在我的网站www.monkey-touch.com上工作时，我开始在标题和其他几个地方使用自定义字体。它看起来很棒，并且感谢它在所有浏览器上运行的字体松鼠。为什么我的自定义字体在某些浏览器中有位置偏移？

但是，后来我意识到字体在某些浏览器中呈现不同。 Chrome，Opera和Safari都会使自定义字体比其他字体略高。这并不是那么大的问题，但是当试图用大尺寸的自定义字体添加另一个页面时，偏移量变得更大，因为文本呈现在div之外是非常令人讨厌的。

请注意，这个问题显然没有任何与其他div的，因为即使渲染body标签的字体，没有其他的div已经偏移的错误的CSS样式的可以在这里看到：http://monkey-touch.com/Sandbox2/

能

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

我对字体面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;

}

感谢所有提前。

来源

2011-08-28 Gerard

在文本容器上设置“valign：”是否有所作为？ – DaveRandom

在你的例子中没有重置，所以我的猜测是变化将是由于行高。尝试在CSS中设置行高， – Rich

对不起，在我回答之前没有看到您的评论。 – gargantuan

我已经想通了，它很奇怪，包含两件事情。

1）我从字体松鼠得到的.ttf和.eot都不好。从字体网站获取原始.ttf并将其转换为.eot自己是正确再现的必要条件。我不知道这是否是字体松鼠的错，因为翻译的差异看起来非常随意和奇怪，也见第2点）。

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

看起来很奇怪，因为涉及到的所有浏览器都使用相同的.ttf（除了使用.eot的IE8和更少），但呈现方式不同。另外.woff必须被删除，为什么？尽管我已经解决了我的问题，但它似乎仍然是一个相当随意和奇怪的问题。如果有人知道更多关于这个东西，我很想知道。

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

来源

2011-08-29 00:18:28 Gerard

-3

您需要指定一个行高。尝试

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

来源

2011-08-28 12:38:57 gargantuan

对不起，不管什么行高。两组浏览器之间的相对差异保持不变，或接近相同。添加的CSS的结果是http://monkey-touch.com/Sandbox2/ 我添加了一个粉红色的div来阐明字体中的偏移量 – Gerard

问题是由浏览器否定计算精确字形界引起

这个问题的解决方案是单个文本行添加到您的CSS（完成对业绩的缘故。）：

text-rendering:optimizeLegibility;

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

来源

2012-03-19 20:51:56 Stefan

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

回答

相关问题