Chrome 与 Firefox 中的文本大小差异

Posted 2023-03-06

【中文标题】Chrome 与 Firefox 中的文本大小差异

【英文标题】：Text size differences in Chrome to Firefox

【发布时间】：2011-05-07 08:55:28

【问题描述】：

我确实在谷歌上搜索过类似的问题，但一无所获，这让我感到困惑。

无论如何，在这个 http://dev.subverb.net/index.php

两个浏览器的菜单书写粗细不同。当字体重量减少到 500 时，两者都是一样的，但是当它是 600 时，它是我在 Firefox 中想要的，但在 Chrome 中明显更厚。这也破坏了我的设计。

我只是不知道这可能是什么……有什么想法吗？

【参考方案1】：

您不能依赖字体宽度的一致性。它不仅在浏览器之间有所不同，而且在操作系统之间也有很大差异。相反，您必须创建您的设计，以便在字体宽度上有一些余地。

为了获得更好的一致性，请尝试使用 html 5 @font-face，它现在已在所有现代浏览器中实现。但即便如此，也不能保证宽度——这只能保证至少字体定义是相同的。

最后，您可以使用图像以获得完美的一致性，但强烈建议不要这样做。最好在您的设计中留出一些回旋余地。

【参考方案2】：

不要使用font-weight 的数值。它们对于选择字体系列的多个权重没有用，因为：

浏览器支持较差且不一致 字体支持（将其重量描述为一个完整系列的一部分）很差 您将在font-family: 规则中使用的所有内置操作系统字体都没有除正常和粗体之外的额外粗细。

font-weight: 600 长期以来一直存在问题。 Opera 和 Chrome appear 都在 600 粗体上使用合成创建的粗体字体，而不是从 700 粗体开始使用的真正粗体字体变体。 （在没有粗体/斜体变体的系列上请求粗体或斜体时，通常使用合成字体。）此外，在 Firefox/OSX 上，600 曾经被视为normal。

与bold 对齐的正确权重值为700。最好坚持使用简单的 normal 和 bold 值。

顺便说一句，您还有一个字体系列拼写错误（san-serif 应该是 sans-serif）。

【讨论】：

好的，感谢您至少为我清理了它（以及 sans 的事情）