2

3.5em / 56px Arial: Chrome | Firefox, IE, Chrome

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;
    ...

I've got an element with a bar below it, and some Loading text like so. on Chrome the text fits neatly above the bar, which is sized to 100% of the parent it and the loading text share ( 200px width ). On Firefox and IE, however, the font is much larger(!) sending it past the bar and looking misaligned as a result. All of the browser's dev tools report that the fonts are the correct size ( when they are obviously not to the human eye ), and none of the browsers have any zoom level set ( tested different zoom levels as well, no change in the scaling difference )

This has me extremely stumped, I've been through SO and google many times over reading all of the related font inconsistency issues looking for something I've missed, and have yet to come across this one again.

Is this something I can fix simply, or will I have to wrangle with per-browser css rules to lower the font size?

4

3 回答 3

1

好像有问题font-variant: small-caps;

当像在这个小提琴中那样删除它时，我在 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 和移动设备上有所不同......哦，好吧 :)

于 2013-09-07T19:54:27.290 回答
1

你所看到的是真实的。我更愿意将其视为 Chrome 是个例外，但我就是这样。

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

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

如果您需要对一小段文本进行像素完美的渲染，则图像可能效果最好。

于 2013-09-07T19:06:30.863 回答
0

你有两个选择。

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

如果您删除.loadingText和 set的宽度text-align: center;，那么您就大功告成了。

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

这是您的选择。

  1. 字体修复
  2. 宽度固定
于 2013-09-07T20:20:40.847 回答