OSX Chrome中指定monospace渲染PingFang SC的字体偏移问题

我刚复现了你遇到的这个问题——在MacOS的Chrome浏览器里，当设置font-family: monospace时，中文会被渲染为PingFang SC，但它的垂直位置比直接指定font-family: "PingFang SC"整整高出2像素，而且调整line-height完全无法修正，连特殊字符、空格的排版也出现异常。

问题根源 #

这是Chrome对monospace字体族的中文fallback逻辑导致的：Chrome会默认给monospace族下的非等宽 fallback 字体（比如PingFang SC）套用一套强制的排版规则，试图模拟等宽字体的对齐效果，这就导致它的基线位置和直接作为无衬线字体加载的PingFang SC不一致，进而出现偏移。

可行的解决办法 #

• 优先指定字体族（推荐）：把PingFang SC放在monospace前面，这样中文会优先使用原生排版的PingFang SC，英文等字符仍会遵循monospace的等宽规则，从根源解决偏移和特殊字符问题：

  font-family: "PingFang SC", monospace;
  

• 强制修正偏移：如果必须以monospace作为首要字体族，可以通过相对定位微调垂直位置，注意用相对单位适配不同字号：

  .monospace-fix {
    font-family: monospace;
    position: relative;
    /* 2px对应16px字号，换成em更灵活 */
    top: -0.125em;
  }
  

• 调整字体特性（兼容性有限）：尝试关闭Chrome对monospace字体的强制liga特性，让PingFang SC使用原生排版规则，仅推荐在特定场景测试：

  font-family: monospace;
  font-feature-settings: "liga" 0;
  

补充说明 #

关于特殊字符和空格的异常，本质是monospace模式下Chrome会强制统一所有字符的宽度，而PingFang SC作为无衬线字体的字符宽度逻辑和等宽字体不匹配，所以优先指定字体族的方法能同时解决这个问题。

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