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