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

【问题标题】：Exact same CSS font taking more space in Safari完全相同的 CSS 字体在 Safari 中占用更多空间
【发布时间】：2014-07-28 21:22:02
【问题描述】：

我正在使用这个 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 box size是定长的，结果就是文本结尾太靠近下边框了。

我不能有可变长度的盒子。您可以在此处查看该网站（转到指导部分）： enter link description here

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

【问题讨论】：

标签： css google-chrome safari

【解决方案1】：

原因是其他浏览器以指定的确切大小呈现字体，而 Safari 以一系列步骤呈现字体。

我假设 Apple 团队认为以 10.3 像素渲染的字体看起来比以 10.0 像素渲染的字体更好。（组成值）。

结果是您在 Safari 和其他浏览器之间得到不同的结果。

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

Test page at svija.love

在其他浏览器中，字体会随着窗口平滑调整大小。在 Safari 中，字体大小会在一系列跳跃中增大。

我正在寻找解决此问题的方法（帮助，有人！），因为这种行为搞砸了我的布局，让我在Ozake.com 看起来有拼写错误。

[2021 年秋季更新] 我编写了一个程序，将各种文本块组合成一行，从而消除了间距问题。请参阅svija.love 了解更多信息。

【讨论】：

【解决方案2】：

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

我希望这会有所帮助。

【讨论】：

我转换为 em 并且它有所帮助。

【解决方案3】：

Safari 将 open sans 呈现为比 chrome 更粗，因此您需要为 safari Open Sans Google Web Fonts Rendering in Chrome应用更轻的字体粗细@

【讨论】：

谢谢，明确地将字体粗细设置为 '400' 并且 em 中的大小有所帮助。仍然不完全相同，但至少它们更适合它们的 div 框空间。