不一致的字体大小与px和em交叉浏览器

Question

3.5em：http://jsfiddle.net/yst9h/

html, body {
    font-family:Arial, Helvetica, Sans-Serif;
}
.loadingText {
    font-weight:bold;
    font-variant:small-caps;
    font-size:3.5em;
}

56px：http://jsfiddle.net/yst9h/1/

    ...
    font-size:56px;
    ...

我有一个元素，下面有一个条形图，还有一些像这样的加载文字。在Chrome上，文本整齐地位于条形图上方，条形图的大小为父级的100％和加载文本共享（200px宽度）。但是，在Firefox和IE上，字体太多更大（！）将其发送到条形图并因此看起来未对齐。所有浏览器的开发工具都报告字体大小正确（当它们显然不是人眼时），并且没有一个浏览器具有任何缩放级别设置（测试不同的缩放级别，缩放差异没有变化） ）

这让我非常难过，我经历过SO和Google多次阅读所有相关的字体不一致问题，寻找我错过的东西，并且还没有再遇到过这个问题。

这是我可以简单解决的问题，还是我必须使用每个浏览器的css规则来降低字体大小？

Answer 1

你所看到的是真实的。我更愿意将其视为Chrome是特例，但那就是我。

没有简单的解决方法。最好的方法是不要对任何给定文本填充的空间做出假设。

对于需要多行的文字，您可以使用line-height属性获得一些规律性。

如果您需要对一小块文本进行像素完美渲染，那么图像可能效果最佳。

Answer 2

font-variant: small-caps;

似乎存在问题

当像fiddle中那样删除它时，我在W7中使用Fx，Chr和IE8进行一致渲染。
如果您通过测试确认（我没有彻底测试），我建议您使用较小的字体大小渲染文本并强制使用大写（没有font-variant:small-caps;的帮助）并使用 :first-letter 就是这样：

.loadingText {
    font-size: 2.5em; /* example, something less than 3.5em. Equiv. 40px */
    text-transform: uppercase;
}
.loadingText:first-letter {
    font-size: 3.5em;
}

即使使用这种广泛使用的属性，在不同的操作系统和浏览器上渲染文本并不意味着像素完美，因此它们的宽度会有所不同（并非每个Linux发行版都有Arial，或者可能只有极少数，反锯齿是操作系统和用户的选择，OS X的渲染与Windows不同，它在不同版本的Windows和移动版本上都有所不同......哦，好吧:)

Answer 3

您有两种选择。

1. 减小文字的大小。
2. 增加容器的大小。

如果您移除.loadingText的宽度并设置text-align: center;，则大部分都在那里。

您需要同等地设置文本和加载栏的宽度（因此您必须删除文本的宽度）。出于美学目的，您可能希望将文本居中。

以下是您的选择。

1. Font Fix
2. Width Fix