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 似乎都在重量600上使用合成创建的粗体字体,而不是从重量700起使用的真正的粗体字体变体.(如果在没有粗体/斜体变体的系列上请求粗体或斜体,则通常使用合成字体.)此外,在Firefox/OSX上,600过去也被视为normal.

与之对齐的正确重量值bold是700.更好地坚持平原normal和bold价值观.

顺便说一下,你也有一个字体错误拼写(san-serif应该是sans-serif).