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

Question

我最近发现了这个历史文档，它旨在作为对显示它的任何应用程序的 UTF-8 编码的测试。

\n\n

当我将它粘贴到我的终端（iterm2）时，它会漂亮地加载最后的方框图（除了右下角的几个）：

\n\n

\n\n

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

\n\n

\n\n

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

\n\n

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

\n\n

编辑

\n\n

感谢Tom Blodget 的回答，我现在意识到字体是一个重要的考虑因素。我会澄清：

\n\n

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

\n\n

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

\n\n

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

\n\n

所以看起来浏览器仍然做错了什么。

\n

Answer 1

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

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

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

[Windows 10 上的谷歌浏览器 72.0.3626.96。]