Browser unicode框图形在浏览器中无法正确渲染

我最近发现了它，它的目的是测试UTF-8编码在任何应用程序中的表现

当我将其粘贴到终端（iterm2）中时，它会漂亮地加载末尾的方框图（右下角的一对除外）：

但在Chrome和Firefox中，它们都是错误的：

这似乎与渲染字符的宽度有关：例如“╲" 在“我的终端”中显示的宽度与其他字符（如“a”）相同，但在浏览器中显示的宽度更大

这是一个深思熟虑的选择吗？如果是，是什么激发了它？如果不是，哪里是提交bug的正确位置

编辑

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

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

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

当我将任一浏览器切换到Monaco时，它仍然错误地显示方框图形，再次显示的字符显然比单空格宽度更宽

---

所以看起来浏览器还是有问题。

当我转到开发工具时，我看到整个测试只有一个

pre

元素。我的系统上使用了几种字体。除了右边的填充图案之外，其他一切看起来都很好

如果我删掉所有其他文字，唯一使用的字体是Console，看起来还可以。我认为这取决于你使用了哪些字体，浏览器如何区分它们的优先级，特别是当它必须使用多个字体时，而且（猜想）两个等距字体不必具有相同的宽度

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

---

[Windows 10上的Google Chrome 72.0.3626.96.]

是否使用单间距字体？控制台默认情况下通常使用单间距字体，但浏览器不使用。这显示为

元素的一部分，因此周围的ASCII文本（包括屏幕截图中的可见部分，“方框图形对齐测试：”）是monospace。感谢您提醒我注意（现在很明显：-/）字体选择的重要性。编辑这个问题，因为这对我来说还没有完全解决。你是在为你的web浏览器提供与所需字符宽度相同的单空格字体吗？你可能也在为它提供其他选项，而不是给它一个说明使用哪种字体的页面？我认为这个测试不是为了选择字体，只是定位。