Question

我发现浏览器在处理font-size时存在不一致（在Mac OS X 10.11.4上）。我想知道这是Firefox中的错误，还是CSS中的错误，还是我不了解CSS？

This JSFiddle显示详细信息。在这样的部分：

<pre>Start of pre section
  <code>**problem here!**</code>
End of pre section
</pre>

样式code { font-family: Courier; }会更改Safari和Chrome显示的字体大小，但不会更改Firefox中的字体大小。然而在其他部分中，code元素大小在所有浏览器中从13px增加到16px。

为什么在所有浏览器中设置font-family后，字体大小从13px增加到16px？

也许Firefox 正在更改font-family而不是font-size。然而，会改变其他地方的字体大小，例如code元素内的p或列表内的字体大小。

我猜测解决方案就是在我关心它的地方积极设置带有像素单位的显式字体大小（忽略可访问性）。

引自2006年可能相关的Firefox bug：Bug 328621 - strange default monospace font size -- differs from the proportional fonts

虽然这给浏览器带来的浏览器间可移植性问题对我来说似乎并不重要。我最后一次想要标记HTML，以便等宽字体部分在Mozilla和M $ IE中显示相同，我不得不求助于绝对字体大小，由于它们所带来的可访问性问题，这当然应该避免使用。

是的，这是一个简单的解决方法 - 更改设置。但大多数用户将使用默认值。： - （

Answer 1

这个问题并不新鲜;多年来人们都知道browser handling of monospace fonts is incredibly screwy并且浏览器不一致。有许多变通方法可以不要求您覆盖用户设置的等宽字体首选项，其中最令人困惑的是指定

font-family: monospace, monospace;

这是正确的：字体堆栈末尾的两个 monospace个关键字。没人知道为什么这样有效;它只是。

对于它的价值，Firefox的UA样式表包含对-moz-fixed关键字的引用，该关键字引用用户设置的首选项，其中包括系列和的大小它是font-family属性的值。 Firefox的首选项设置为13px，无论系统的默认等宽字体是什么。似乎monospace, monospace强制浏览器根据规范计算元素的字体大小，同时至少保留了首选的等宽字体系列。但这只是猜测。

这是一个错误吗？这取决于你问谁。如果你问浏览器供应商，他们可能会说这是故意的。如果你问其他作者，他们可能也会把它称为bug。这是规范违规吗？不，因为规范允许浏览器实现默认值，但他们喜欢。

Answer 2

为什么设置后字体大小从13px增加到16px 所有浏览器中的font-family？

可能是因为浏览器的默认样式表具有这些设置。

我猜测解决方案是不要试图理解这一切只要在我关心的地方积极设置字体和字体大小。

不确定“agressivly”是什么意思，但是：如果您对该样式有特殊要求，请在您自己的样式表中尽可能精确地设置它，包括字体族，重量，大小等。

Answer 3

那是因为在黑暗时代，一个Netscape开发者决定在浏览器设置中强迫他的个人偏好（大多数编码员都是认为通过设置一个或两个更小的文本大小来摧毁他们的眼睛是聪明的年轻人比起其他所有人，他们认为“等宽”属于他们，并且“对正常人”没有“无衬线”。

因此，Firefox附带的默认设置将“monospace”别名设置为比“sans serif”更小的字体。几乎破坏了协调的字体集（monospace字体被设计成与serif或sans serif相同）。

您可以通过启动about：config并将所有font.size.fixed。*属性更改为与font.size.variable。* ones相同的值来在本地“修复”它。但由于你不能在野外修复所有的Firefox，这使得monospace css别名对这个浏览器毫无用处。

Answer 4

_{来自OP的回复从问题转移到回答：}

BoltClock的回答非常有帮助。他/她引用的关于Fixed Monospace Sizing by Eric Meyer的页面有一个全面的分析和一些解决方案。它解释了一些与使用用户字体首选项时相关的浏览器机制，这解释了我所看到的一些神秘行为（例如，为什么code元素似乎继承了13px的大小它是p元素的子元素，大小为16px：原因是它实际上继承了大小medium，导致浏览器使用默认的浏览器/用户首选项。）

根据我的情况，我发现我可以删除html { font-size: 16px; }样式，而是添加以下内容：

pre { font-family: monospace, monospace; }
code { font-family: monospace, monospace; font-size: 100%; }

这为我提供了一致的相对字体大小，但仍然允许用户设置默认的字体大小。 Eric Meyer建议使用monospace, serif，但我发现monospace, monospace有效，而且我认为当你在样式表中看到它时会更有意义（它很奇怪，但看起来可能是有意的，这意味着你真的，真的想要等宽的。）

我认为最终的问题是浏览器对monospace字体的字体大小默认/首选项不同于其他字体。＆＃34;可访问的响应式设计的主要思想＆＃34;关于font-size是让用户控制font-size。但是当我们有多种字体大小设置（serif，sans-serif，monospace）时，那么用户设置的选项太多了。用户只需要他们可以阅读的更大的文本。但对于作者来说：他们只是希望字体的相对大小在任何给定的大小都是正确的。

如果它对其他人有帮助，这里有一些例子（在slick Eric Meyer style中）显示monospace, monospace修复了我在下面的答案中写的一些问题。< / p>

＆＃13;

code:before {
    content: attr(style); 
    border-bottom: 1px solid #AAA; 
    color: #575; margin-right: 0.5em;
}
p {
    margin-bottom: 2em;
}

＆＃13;

<p>This is a 'p' element with a <code>'code' element</code> contained within.</p>
<p>This is a 'p' element with a <code style="font-family: monospace">'code' element</code> contained within.</p>
<p>This is a 'p' element with a <code style="font-family: monospace, monospace">'code' element</code> contained within.</p>
<p>This is a 'p' element with a <code style="font-size: 100%">'code' element</code> contained within.</p>

<p>This is a 'p' element with a <code style="font-family: monospace; font-size: 100%">'code' element</code> contained within.</p>

<p>This is a 'p' element with a <code style="font-family: monospace, monospace; font-size: 100%">'code' element</code> contained within.</p>
<p>This is a 'p' element with a <code style="font-family: monospace; font-size: 120%">'code' element</code> contained within.</p>

<p>This is a 'p' element with a <code style="font-family: monospace, monospace; font-size: 120%">'code' element</code> contained within.</p>

＆＃13;

Answer 5

我遇到了一个类似的问题，我使用等宽字体，并且在Google Chrome和Edge＆Mozilla Firefox中大小是不同的。这是因为对于 standard 字体，不同的浏览器具有不同的字体粗细和大小。为了解决此问题，我使用了Google字体，然后所有浏览器中的字体大小都相同。

为什么Firefox不支持包含在pre中的代码标签的CSS字体大小？

5 个答案: