使用<pre>或white-space:pre时，修改字体为何破坏ASCII排版？

问题核心在于你选用的Helvetica Neue是比例字体（非等宽字体）——这类字体的不同字符宽度不一致（比如字母i比w窄很多），而ASCII艺术的排版完全依赖「每个字符宽度相同」的等宽字体才能保持形状。<pre>标签默认使用系统等宽字体，所以原本排版正常，一旦替换成Helvetica Neue这种比例字体，字符对齐就彻底乱了。

解决办法 #

你需要改用等宽字体，优先选择Helvetica Neue的等宽变体，再搭配通用等宽字体作为降级方案，确保在不同系统都能正常显示：

修改你的CSS代码如下：

pre {
  text-align: center;
}

.open {
  /* 优先调用Helvetica Neue的等宽版本，无则降级到系统通用等宽字体 */
  font-family: "Helvetica Neue Mono", "Menlo", "Consolas", "Courier New", monospace;
  font-weight: lighter;
  white-space: pre;
}

额外说明 #

如果你的需求是必须使用Helvetica Neue的非等宽轻量版本，那几乎无法维持ASCII艺术的原有形状——比例字体的字符宽度差异是天生的，仅靠white-space属性无法修复。这种情况下只能重新针对该字体调整ASCII艺术的字符布局，或者放弃使用该字体。

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