为什么在 Opera 中以更大的字体呈现文本？答案

【问题标题】：Why is text rendered with a greater font-size in Opera?为什么在 Opera 中以更大的字体呈现文本？
【发布时间】：2011-10-24 04:23:43
【问题描述】：

我正在处理一个需要或多或少像素完美的 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”的下降部分挂在下面；它是“46px”，更接近于 Firefox 中的“50px”。这向我表明 Opera 正在渲染大约 10% 的字体。

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

谢谢！

更新：

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

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

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

这个问题可能只是关于 Opera 如何显示通用“无衬线”字体的一个怪癖吗？

更新 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 中是否会出现奇怪的渲染？

【问题讨论】：

感谢您的回答，但重置样式表并没有解决问题。我实际上是使用 Eric Meyer 的“Reset Reloaded”样式表作为最初出现此问题的 HTML 页面的一部分。
请查看使用 Eric Meyer 的“Reset Reloaded”的示例页面，但字体大小仍然存在相同问题：troy.onespot.com/static/stack_overflow/…
我认为您在屏幕截图中交换了 Firefox 和 Opera？
@rlovtang：废话，我做到了！感谢您指出这一点 - 我已修复它。
我看到的结果与您在 OS X 10.6.4 上的 Opera 10.62 / Firefox 3.6.8 中的屏幕截图完全相同

标签： html css opera font-size

【解决方案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 有类似的系统字体偏好？

【讨论】：

【解决方案2】：

我遇到了类似的问题。

我发现在 FF 和大多数其他浏览器上默认计算的字体大小是 16px，但在 opera 上默认似乎是 20px。

我只是设置了 font-size:16px;对于 html，它似乎可以处理它。

【讨论】：

在CSS重置文件和其他技巧的所有组合之后，终于做到了！！！

【解决方案3】：

我怀疑 Opera 为 Sans-serif 使用了与其他浏览器不同的备用字体。这应该可以通过使用系统上肯定安装的不同字体来确认或消除。

【讨论】：

这对我来说似乎是最可行的。更改为 Arial（我肯定已经安装）后，文本在我测试过的所有浏览器中都完全匹配。我不是 100% 确定问题是什么，但在我的情况下解决了它。感谢您的帮助！

【解决方案4】：

我没有重现您的问题。这是我在 Firefox 3.6.8（和 Internet Explorer 8）中得到的：

【讨论】：

谢谢，罗伯特 - 看起来你的字体比我的更压缩（也许你的浏览器默认为通用的无衬线字体？），但每个字体大小的文本高度是仍然类似于我的屏幕截图。您能否将您在 FF/3.6.8 和 IE/8 中看到的内容与 Opera 10.10 进行比较，看看是否存在像我看到的高度差异？
“我无法重现这个问题”不是答案：p

【解决方案5】：

我想我知道你的问题。我在所有浏览器（至少 Firefox、Opera 和 Chrome）中都得到完全相同的大小。我敢肯定，如果您不认识自己或其他人已经这样做了，这很容易被忽略，但是请尝试检查 Opera 中的缩放设置...如果它没有帮助，请告诉我，我会做更多的工作。

【讨论】：

谢谢，ClarkeyBoy - 我在 Opera 中的缩放设置是默认的 100%。我的 Helvetica 字体有可能有一个怪癖吗？我将尝试使用通用的无衬线字体（可能还有其他常见字体），看看这是否可以在其他字体系列中重现。
然后尝试检查 Firefox。值得一试——否则你会觉得自己是个傻瓜，花了几天时间试图对这个进行排序，Firefox 缩小了 10%。我也在玩弄它。我开始怀疑这是否是一个怪癖 - 如果您缺少字体，或者我们是。
@Bungle 您可能还想检查系统上是否有多个 Helveticas，例如TTF 和 Type 1。我会用 Arial 试试这个以确保
@ClarkeyBoy：谢谢 - FF 也是 100%。我不认为这可能是缩放问题，因为 FF 和 Opera 也会按照文本的比例缩放红色框。我现在正在使用其他字体进行测试，看看我是否可以隔离问题......也开始怀疑 Helvetica 问题。
@Pekka：好电话。现在试试。

【解决方案6】：

这是一个 CSS 重置样式表可以真正为您简化事情的地方。

http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/

【讨论】：

谢谢 - 请参阅上面的我的 cmets。

【解决方案7】：

在我使用 Eric Meyer 的 reset CSS 之前，我遇到了类似的问题 :)

【讨论】：

感谢您的回答，但重置样式表仍然会出现问题 - 请参阅上面的我的 cmets。

【解决方案8】：

遇到类似问题，不得不更改我的后备顺序来自：

font-family: Helvetica, Verdana, Arial, sans-serif;

到

font-family: Helvetica, Arial, sans-serif;

由于 Arial 和 Helvetica 的大小几乎完全相同，所以当 Opera 回退时它仍然看起来不错。

【讨论】：