完全相同的CSS字体在Safari中占用更多空间

Question

我正在使用这个CSS来设置div的样式：

#mainSection .mainArticle .text {
    width: 600px;
    margin-top: 0px;
    margin-left: 20px;
    line-height: 26px;
    color: white;
    float: left;
    font-family: 'Open Sans', sans-serif;
    font-size: 15px;
}

下图显示了Safari和Chrome之间的区别：

我不知道为什么会有这种不同。 Chrome中的字体看起来“更大胆”，但每个字符在Safari中的长度都要小一些，这意味着每条字符的平均字符数更少。由于div框的大小是固定长度，因此结果是文本的结尾太靠近底部边框。

我不能有可变长度的盒子。你可以在这里看到这个网站（转到MENTORING部分）： enter link description here

有解决此问题的便捷方法吗？我知道每个浏览器的字体引擎都不同......

Answer 1

我认为这是因为所有浏览器的浏览器大小都不相同，并且您已根据像素定义了CSS。尝试将像素（px）转换为百分比（％）或em / rem值。

我希望这会有所帮助。

Answer 2

Safari提供的打开范围比使用chrome更大胆，因此您需要为safari Open Sans Google Web Fonts Rendering in Chrome

应用较轻的字体粗细

Answer 3

原因是，虽然其他浏览器以指定的确切大小呈现字体，但 Safari会在一系列跳跃中呈现。

我认为重点在于，以10.3px渲染的字体看起来比在10.0px渲染的字体看起来要好。（这些是由值组成的，但是你明白了。）

结果是，您可以在Safari和其他浏览器之间获得不同的结果。

最简单的方法是将字体大小定义为百分比，然后慢慢调整窗口大小：

Test page at Ozake.com

在其他浏览器中，字体会随窗口平滑调整大小。在Safari中，字体大小保持不变，然后跳转到新大小然后停留同样的等等。

我正在寻找这个（帮助，某人！）的解决方法，因为这种行为搞砸了我的布局并使其看起来像Ozake.com处的拼写错误。