IE 和 FireFox 中的 CSS 字体变化问题答案

【问题标题】：CSS Font variation problem in IE and FireFoxIE 和 FireFox 中的 CSS 字体变化问题
【发布时间】：2011-10-19 15:57:34
【问题描述】：

我正在使用这种体型

body {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #FFF;
    margin: 0;
}

但是，在 IE7 和 IE8 中，字体比 Firefox 中的要小。可能是什么问题呢？

【问题讨论】：

标签： css

【解决方案1】：

我使用您的样式表示例设置了一个测试页面，但我看不出 Firefox 和 IE8 之间的大小有任何差异。也许还有其他 CSS 规则导致了您的特定问题？

我通常使用 em 来规范字体大小并且没有任何问题。 IE6 不允许用户重新调整以像素为单位的文本大小，因此我们放弃了使用 px。

所有浏览器中“中等”文本的默认大小为 16 像素。将此大小调整 62.5% 会使大小降至 10 像素。 (16 * 0.625 = 10) 这降低了计算字体大小的数学复杂性。现在您可以think 以像素为单位，但以 ems 设置大小：1em 是 10px，0.8em 是 8px，1.6em 是 16px，等等。请参阅http://clagnut.com/blog/348/。

<html>
<head>
<title>Test Page</title>
<style type="text/css">
body {
    font: normal 62.5% Verdana, Arial, Helvetica, sans-serif;
    color: #000;
    margin: 0;
}

#content {
    font-size: 1.2em;
}
</style>
</head>

<body>
    <div id="content">
        <h1>Test Page</h1>

        <p>Duis commodo hendrerit arcu, nec tincidunt est malesuada vel. Nunc
        sodales nisl vel dui mattis pulvinar. Vestibulum vel malesuada augue.
        Aliquam vel tristique sem. Sed at leo et felis ultrices facilisis. In
        hac habitasse platea dictumst. Fusce id sapien eros. Nulla facilisi.
        Cum sociis natoque penatibus et magnis dis parturient montes, nascetur
        ridiculus mus.</p>
    </div>
</body>
</html>

顺便说一句：您也可以考虑使用 line-height 属性来调整段落中的行间距。更宽的行间距使文本更易于阅读。

【讨论】：

【解决方案2】：

您需要的是 CSS 重置样式表，例如 YUI CSS Reset 和 CSS Fonts。

基本上，这些 CSS 样式是您页面中出现的第一个样式，它们旨在在所有浏览器中以相同的方式显示相同的元素。

使用它们确实是一个好习惯，它们可以节省大量时间尝试为每个浏览器自行调整。

为了澄清，YUI Fonts 所做的是为字体分配百分比值。正如您在阅读this 文章中看到的那样，对字体使用 px 值可能会导致它们在不同浏览器（即使在同一操作系统上）之间呈现不一致。这是因为每个浏览器都有不同的字体处理方式。

使用百分比值是一种更好的字体大小调整方法，并保持浏览器缩放支持。

包含 YUI 字体重置后，要从那里正确调整字体大小，您可以参考以下table 以使用正确的百分比值。

您可能还想查看this 问题。

【讨论】：

基于这个问题，我在这里看不到重置样式表有什么作用。
你可能想看看YUI Fontsreset。它尝试在所有浏览器中标准化字体大小和显示。由于问题的问题是不同的字体大小，这可能会有所帮助。
可能，但请看代码。它所做的只是在body 上设置font-family 和font-size。你认为 YUI 字体重置会产生什么不同的结果？ OP 可能没有向我们展示一些代码，但根据问题中的内容，我认为 CSS 重置的帮助范围不大。
YUI 的神奇之处在于规范化所有字体，这样您就不必再使用 px 值（浏览器之间不一致），而是使用百分比值（正确的百分比值来自他们的table），并且字体将在不同的浏览器中正确显示。关键是不要再使用固定大小的字体了。
我仍然不明白这将如何解决 OP 的问题，即body {font-size: 12px;} 在 Firefox 和 IE 中显示不同。字体的像素值在浏览器之间不会不一致。

【解决方案3】：

不——没有错。浏览器只是呈现方式不同。

如果需要，请尝试搜索“internet explorer specific css”，您应该会找到许多示例，说明如何将 CSS 的某些块调整为特定于 Internet Explorer - 例如，您可以稍微指定字体如果在 IEx 中则更大。

【讨论】：