OS X和Windows之间的文本渲染会丢弃我的填充？

Question

嘿伙计们，我试图用简单的背景颜色和填充来设计客户的文章h1。我需要将文本在填充内垂直和水平居中，但我发现OS X和Windows之间存在基线差异。至少那是我最好的猜测。以下是违规元素的具体代码：

.entry-title {
    color: #fff;
    background: #A3BCC3;
    font-size: 24px;
    text-transform: uppercase;
    text-align: center;
}

.normal .entry-title {
    float: left;
    width: 100%;
    padding: 10px;
    margin-bottom: 30px;
}

以下是截图：

OS X：http://i54.tinypic.com/2a0bx1v.png

Windows：http://i56.tinypic.com/2gv4vie.png

你会注意到它在Windows上渲染得很好，但它在OS X上的效果太高了。它们在整个浏览器中渲染相同，唯一的区别在于操作系统。字体是Quicksand Book，正在通过@ font-face实现。如果您需要查看该网站的工作版本，请访问http：// angryg.nom.es/rosebud。如果您确实设法检查出来，您会注意到我在主页底部的静态内容页脚上遇到了同样的问题。

无论如何，我们将非常感谢任何帮助。

Answer 1

你需要为特定的浏览器指定一个行高（painfull）使用这种类型的属性：1.1等，而不是指定像素，从我的经验来看它更好。

此外，仍然在Mac中，在Safari和Firefox之间你会发现行高之间的差异！所以这不仅仅是OSX与Windows。

Answer 2

您的字体文件可能不正确 我在本地安装的webfont也有同样的问题。 谢天谢地，Google provided与webfont的字体相同，为我解决了这个问题。

Answer 3

操作系统的默认字体不同，因此请在元素css中添加font-family: Arial。它应该在OSX和Windows中工作，因为它们都支持Arial。