Chrome与Firefox中monospace字体显示不一致问题求助

先看你使用的代码：

p {
  font-family: monospace;
}

<p>
  this is a paragraph
</p>

出现跨浏览器显示差异的核心原因，在于不同浏览器对「通用字体族（generic family）」的默认 fallback 规则不一样，具体细节：

• Chrome（Chromium内核）会把monospace默认映射到系统特定等宽字体：Windows下是Consolas，Mac下是Menlo，Linux多为DejaVu Sans Mono。
• Firefox有独立的默认映射逻辑：Windows下默认用Courier New，Mac下虽也可能选Menlo但渲染细节有差异，Linux常使用Liberation Mono。

除此之外还有两个影响因素：

• 渲染引擎差异：Chrome用Skia引擎渲染字体，Firefox用Gecko引擎，哪怕是同一款字体，两者的抗锯齿、字距调整算法也有区别，视觉上会呈现细微差异。
• 系统字体优先级：如果用户系统安装了其他等宽字体，不同浏览器的字体选择优先级排序逻辑不同，也会导致最终显示的字体不一样。

如果要让两款浏览器显示效果一致，建议直接指定具体的等宽字体序列，示例：

p {
  font-family: Consolas, "Courier New", monospace;
}

浏览器会按顺序查找已安装的字体，找不到再 fallback 到通用monospace，能最大程度保证跨浏览器一致性。

内容的提问来源于stack exchange，提问作者Johnny Chen