Chrome与Firefox中的文字大小差异

Question

我真的已经在谷歌搜索类似的问题而没有发现任何东西，这让我很困惑。

无论如何，就此而言 http://dev.subverb.net/index.php

两种浏览器的菜单编写厚度不同。当字体权重减少到500时，它们都是相同的，但是当它是600时，它是我想要的Firefox，但在Chrome中明显更厚。这也打破了我的设计。

我无法弄清楚这可能是什么......任何想法？

Answer 1

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

为了更好地保持一致性，请尝试使用html 5 @font-face，现在所有现代浏览器都需要使用它。但即便如此，宽度也无法保证 - 这只能保证至少字体定义是相同的。

最后，您可以使用图像以获得完美的一致性，但强烈建议不要这样做。最好只允许你的设计中有一些摆动空间。

Answer 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）。