Question

请考虑以下示例：（live demo here）

HTML：

<label>Name</label>

CSS：

label {
  font-family: serif;
  font-size: 16px;
}

JS：

$(function() {
  console.log($("label").width());
});

当我在Windows 7上使用Firefox运行此示例时，结果为38。但是，当我在Ubuntu（使用VirtualBox）上使用Firefox运行相同的示例时，结果为48。在这两种情况下，Firefox版本都是7.0.1。

为什么会有这种差异？我怎么能让它变得一样呢？

Answer 1

您没有指定实际字体; “serif”只是带有衬线的任何字体的元名称，浏览器在不同的平台和浏览器上具有不同的默认值。

但即使您指定了可能存在于任何平台上的字体（如core fonts for the web中的字体），由于字体呈现方式不同，结果仍可能不一样; Windows字体渲染确实具有强烈的字体提示（尽可能强制字母形式进入像素网格），而Mac OS和Gnome等使用不那么激进的提示。即使使用相同的字体和大小，此效果也可能导致文本的宽度随着几个像素而变化。

为了避免在使用固定布局时出现布局问题，您应该始终设置至少10-20像素（对于相当短的文本），而不是显然需要宽度以避免包装或溢出。

Answer 2

字体渲染和大小调整非常特定于平台。您可能想要尝试一种您知道在所有系统上都可用的字体，而不是使用像“serif”这样的通用字体。 Arial也许？看看你的号码是否匹配。

此外，您可能会发现浏览器之间存在一些差异，因为像素字体大小也会有所不同。您可能希望查看CSS重置以帮助缓解该问题。

这可能有所帮助：http://www.sitepoint.com/css-font-sizing-tutorial/

Answer 3

在某些浏览器中，还有用户定义的字体大小。因此，您可能需要检查每个浏览器以确保字体大小的设置相同。（这就是为什么我喜欢使用ems，而不是使用px来表示字体大小。）

为什么字体在平台上看起来不同

3 个答案: