粗体谷歌字体显示低于平常的文本

Question

我有一些使用Vollkorn谷歌字体的标题。我注意到只有在Firefox和Chrome中，使用默认粗体和普通字体样式，实际文本才会超出元素的底部边界。当我将其切换为斜体时，它会恢复正常。当字体具有正常权重时，这不会发生。

我制作了一个非常简单的HTML文件，显示了这种行为，但问题只存在于我身上，我将文件发送给其他人，这对两个浏览器来说还不错。

我试图在jsFiddle上重现这一点而没有运气。 http://jsfiddle.net/5WDJU/1/

a

以下是Pastebin上的代码，为了简单起见，我将jQuery粘贴到其中。 http://pastebin.com/yXzHqKrD

以下是在我的计算机上显示问题的屏幕截图。

我还尝试通过访问谷歌字体网站并使用Firebug切换样式来重现这一点，但它运行正常。

我是否错过了某些可以在jsFiddle和字体网站上更正的样式？即便如此，我也不明白为什么它不会发送到我发送文件的人的计算机上。这是谷歌字体的潜在缺陷吗？

Answer 1

这可能是线路高度或填充问题。在chrome或safari中尝试“检查元素”（右键单击）并查看输入表单上哪些样式处于活动状态。 你尝试添加重置css了吗？ http://meyerweb.com/eric/tools/css/reset/

Answer 2

经过一些搜索，我设法找到了其他人发生同样问题的两个实例。我不相信这是CSS的问题，但我不确定问题是由于Google的实际字体还是Firefox和Chrome决定如何呈现此特定字体。

以下是两个链接。

http://code.google.com/p/googlefontdirectory/issues/detail?id=37 http://productforums.google.com/forum/#!topic/chrome/QofmpbyZ7sQ

我从第一个链接获取的解决方案是从FontSquirrel下载粗体非斜体字体并将其嵌入我的网站。