unicode框绘图在浏览器中无法正确呈现

Question

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

当我将其粘贴到终端机（iterm2）中时，它会在末尾精美地加载盒式图纸（右下角的一对除外）：

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

似乎差异与渲染字符的宽度有关：例如，“╲”在我的终端中显示的宽度与其他字符（例如“ a”）一样宽，但是在浏览器中显示的宽度更大。

这是一个故意的选择吗？如果是，是什么启发了它？如果没有，在哪里提交错误的正确位置？

编辑

感谢Tom Blodget's answer，我现在知道字体是一个重要的考虑因素。我会澄清：

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

当我将终端切换为Courier或Courier New时，它可以同样好地显示盒子图纸-在某些方面更好！

当我将任何一个浏览器切换到摩纳哥时，它仍然显示出错误的方框图，再次是明显以等宽宽度显示的字符。

因此，浏览器似乎仍在做错事。

Answer 1

当我使用开发工具时，我看到整个测试是一个pre元素。我的系统上使用了几种字体。除了右边的阴影线外，其他一切看起来都还不错。

如果我修改所有其他文本，则使用的唯一字体是Consolas，它看起来还可以。我认为这取决于您使用哪种字体，浏览器如何确定它们的优先级，尤其是当它必须使用多个字体时，并且（猜想）两种等宽字体不必具有相同的宽度。

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

[Windows 10上的Google Chrome 72.0.3626.96]