为什么 Mac OS 上的 Safari 中的字体大小要小得多？答案

【问题标题】：Why is the font size in Safari on Mac OS so much smaller?为什么 Mac OS 上的 Safari 中的字体大小要小得多？
【发布时间】：2011-03-20 01:10:13
【问题描述】：

我有一个网站，它的所有样式都使用 CSS，在 Windows 中，行距和字体大小在 Firefox、Opera、IE、Safari、Chrome 中都是一致的。

我刚刚在 Mac (Snow Leopard) 上的 Firefox 下尝试过，虽然字体通常看起来比 Windows 上的粗一些，但总体大小看起来差不多。

但是，在 Mac 上的 Safari 中，所有字体看起来都小了很多，行距也更紧了。

这可能是什么原因？这是一个已知的场景，也许有一个很好的解决方法？

如果您想检查情况，有问题的网站是： http://www.marcusstarnes.co.uk

谢谢

【问题讨论】：

【解决方案1】：

由于您在em 中设置了字体大小（一件好事 - 不要更改它！），字体大小取决于浏览器设置/用户偏好。您可能在 Safari 上设置了较小的字体。

另一方面，如果您属于“所有浏览器都必须看起来像，否则世界末日”阵营，那么您不应该使用ems。

我不确定重置样式表中的line-height: 1。这对我来说似乎是错误的......

编辑： 哦等等，我刚刚发现font-size:62.5%;。不会改变我所说的，但这对许多人来说太小了，因为您使用的是用户首选尺寸的三分之二。

【讨论】：

是的，我将样式表中 html 元素的字体大小设置为 62.5%，然后将字体大小设置为 1.1em（我相信大约是 11px）身体元素。我通过在线阅读各种文章了解到这种方法被大量使用，因此当您将字体大小指定为“em”时，更容易理解字体大小将有多大（1.2em = 12px，1.6em = 16 像素等）。
我不知道这些文章是如何得出这个假设的。它假设 1em = 10px。但事实并非如此。 1em 是用户在浏览器首选项中设置的大小。在试图保持 HTML/CSS 中可访问性的外观的同时，将设计师对像素完美的“需求”结合起来可能是一种有缺陷的尝试。
他们确实在假设用户浏览器默认设置为“中等”，我认为是 16 像素。这是我参考的一篇文章：clagnut.com/blog/348。也许我不应该使用这种 62.5% 的方法。
AFAIK only IE 的字体大小设置为“中”。其他浏览器只是让用户设置他们想要的大小。
好的，至少我明白为什么会这样了，谢谢。我只需要找到一种更好的方法来保持可缩放的字体大小，同时在 Mac 上的 Safari 下以相似/合理的大小呈现它们，因此在这些浏览器中看起来“相当”一致。

【解决方案2】：

我知道这是一篇较旧的帖子，但我最近遇到了同样的问题。我唯一遇到问题的浏览器是 Mac 上的 Safari。我最终解决问题的方法是将我的重置从：

html { font-size: 100%; overflow-y: scroll; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }

到

html { font-size: 16px; overflow-y: scroll; -webkit-text-size-adjust: 16px; -ms-text-size-adjust: 16px; }

这只是迫使浏览器全部使用“中等”字体大小，然后从那里缩放。我添加这个的唯一原因是因为真的没有给出答案。希望这会对遇到此问题的人有所帮助。

【讨论】：