Question

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

HTML：

<div>Hello World</div>

CSS：

div {
    font-family: monospace;
    font-size: 1em;
}

JS：

$(function() {
    alert($("div").css("font-size"));
});

在Firefox中，字体大小为16px，而在IE8中，字体大小为13px。

为什么？

（我尝试将font-family更改为Arial，Firefox和IE8都说16px。）

Answer 1

因为em是相对单位。 em等于当前的font-size。如果文档的字体大小为16pt，则1 em等于16pt。

MSIE似乎认为monospace不需要像Arial那样大（以像素为单位）才能读取。例如，12pt Times New Roman大约是10pt Arial。

如果您想要固定字体大小，请使用font-size: 16pt。

Answer 2

每个浏览器都是不同公司的不同产品，他们对产品进行不同的编程，字体大小就是其中之一。 From this link，1 em等于当前字体大小，对于不同的浏览器可能不同，用户也可以更改它，我已经将文本大小更改为IE中的最大字体，字体大小现在为21.33像素。 / p>

使用em意味着它依赖于很多东西，使用％age来保持一致性。

对于不同的浏览器，1 em将是不同的（取决于它们的默认值或用户已更改它）。例如，你说IE的字体大小为13 px，firefox有16 px，当我检查时，firefox有13 px，IE有16 px，当我把文本大小改为最大时，它被改为21.33 px（view - ＆gt;文字大小）

Answer 3

因为它是一个实现选择。例如，firefox有一个配置选项来设置Sans，Serif和Monospace的默认字体和大小。

Answer 4

因为Firefox建设者搞砸了他们编码“等宽”的方式。要使“等宽字体”在Firefox中正常工作，您需要输入“等宽字体”；不是“等宽；”。

我不骗你。问题就这么简单。

亲自检查一下。更改css样式，使其在“等宽”之后和分号之前具有逗号，并观察其立即如何显着改变文本的显示方式。

传统上认为您需要将其键入“ monospace，monospace;”。工作，但他们错了。第二个“等距”是没有意义的，只有逗号很重要。实际上，这意味着您可以在此放置任何东西，它会起作用。因此，如果您想在代码中留下一个有趣的复活节彩蛋，则可以执行诸如“等宽，来自编码器的问候”；并且它可以很好地工作，而无需花费额外的文字更改任何内容。

为什么某些字体大小在浏览器中不一致？

4 个答案: