html - 为什么在 Opera 中以更大的字体大小呈现文本？

Question

我正在处理一个或多或少需要像素完美的 HTML 页面，我注意到在 Opera 10 中，字体渲染得比在其他浏览器中更大，即使字体大小实际上是一样。

请在 Opera 10 和其他浏览器(例如 Firefox 3.6)中查看此示例页面:

http://troy.onespot.com/static/stack_overflow/opera_font_size.html

或者，这是一个说明问题的屏幕截图:

http://skitch.com/troywarr/d47m1/font-size

“50px”和“46px”文本后面的红色框(均具有相应的字体大小)的高度均为 50px。

在 Firefox 3.6 中，“50px”中“p”的下行部分与其后的红框底部对齐。在 Opera 中，“50px”中“p”的下行部分悬卡在下方；它是与 Firefox 中的“50px”更接近的“46px”。在我看来，这表明 Opera 渲染的字体大约有 10% 过大。

这个问题，以及其他正文的同样问题，完全破坏了我在 Opera 10 中的页面布局。如果您对可能导致此问题的原因有任何想法，或者至少如何预防/修复它，请告诉我.

谢谢!

---

更新:

看来我没有安装正确的 Helvetica 副本 - 我将其从字体堆栈中删除，但在我的测试页面上看到呈现的文本没有任何差异。

我更新了测试页面以仅使用通用的“sans-serif”字体系列，所以希望我们现在看到的都是同样的东西。

有趣的是，使用通用的“serif”字体在 Opera 和 Firefox 中显示完全相同。

这个问题是否只是关于 Opera 如何显示通用“sans-serif”字体的怪癖？

---

更新 2:

这可能很重要:我使用的是 Mac OS X Snow Leopard。我现在正在试验其他字体，看看是否可以进一步隔离问题。

---

更新 3:

我使用 Arial 创建了另一个测试页:

http://troy.onespot.com/static/stack_overflow/opera_font_size_reset_arial.html

现在 Opera 和 Firefox 几乎完全匹配!

我可能可以在这个元素中使用 Arial 代替 Helvetica。据我所知，我有一个完整的 OS X 版本的 Helvetica - 所以我无法承受不同用户在我的页面上看到的字体之间的任何差异。我会坚持使用久经考验的 Arial。

但这意味着什么 - OS X 的默认无衬线字体是否只是在 Opera 或其他东西中奇怪地呈现？

Answer 1

当我在 Windows 7 x64 上遇到类似问题的 Opera 11.10 时，我遇到了这个线程。

Opera 默认使用 20px 作为主体字体大小(而不是其他浏览器使用的 16px)。即使在卸载、删除 Opera 首选项并重新安装后，这种情况仍然存在。事实证明，Opera 会尊重您的系统字体大小偏好(在 Win7 上设置在“控制面板\外观和个性化\显示”下)用于呈现网站文本，而其他浏览器(我测试了 FF4、Chrome 11、Safari 5、IE 9)则没有。我的系统字体大小设置为 125%，这解释了 20px。将系统字体缩放设置为 100% 后，Opera 的行为与其他字体相同。

我不确定哪种行为更正确(在某种程度上，Opera 尊重我的字体选择很好)但是因为其他浏览器不这样做，所以这是“意外的”。我没有要测试的 Mac，但也许 MacOS 有类似的系统字体首选项？