browser - unicode box-drawing 在浏览器中无法正确呈现

Question

我最近发现 this historical document ，它声称可以作为对任何显示它的应用程序的 UTF-8 编码的测试。

当我将它粘贴到我的终端 (iterm2) 中时，它会在最后加载精美的方框图(右下角的一对除外):



但是在 Chrome 和 Firefox 中，它们都是歪曲的，而且显然是错误的:



似乎区别与渲染字符的宽度有关:例如，“╲”在我的终端中显示的宽度与“a”等其他字符一样宽，但在浏览器中显示的更宽。

这是一个深思熟虑的选择，如果是这样，是什么启发了它？如果没有，提交错误的正确位置在哪里？

编辑

感谢 Tom Blodget's answer ，我现在意识到字体是一个重要的考虑因素。我会澄清:

在我上面的截图中，Firefox 和 Chrome 使用 Courier 作为等宽字体，而终端使用 Monaco。在这两种情况下，字体似乎与 ASCII 字符一样适用于框绘图字符:当我更改字体时，绘图的外观以及周围文本的外观也会发生变化。

当我将终端切换到 Courier 或 Courier New 时，它同样能很好地显示盒子图纸——在某些方面更好!

当我将任一浏览器切换到 Monaco 时，它仍然显示错误的方框图，同样是因为字符显然以比等宽宽度更宽的宽度显示。

所以看起来浏览器还是做错了。

Answer 1

当我去开发工具时，我看到整个测试是一个 pre元素。我的系统上正在使用几种字体。除了右侧的阴影图案外，一切看起来都不错。

如果我删除所有其他文本，则使用的唯一字体是 Consolas，它看起来不错。我认为这取决于您拥有哪些字体，浏览器如何优先考虑它们，尤其是当它必须使用多个字体时，并且(推测)两种等宽字体不需要具有相同的宽度。

终端可能不太擅长使用多种字体，而是使用一种固定字体或为所需字符选择一种“最佳”匹配。

[Windows 10 上的 Google Chrome 72.0.3626.96。]