Unicode框图在浏览器中无法正确渲染。

Question

我最近发现了这篇历史文献，它声称可以作为测试UTF-8编码的工具，无论用于哪个应用程序的显示。

当我将其粘贴到我的终端（iterm2）中时，它能够完美地加载末尾的方框图案（除了右下角的几个）：

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

看起来差异与呈现字符的宽度有关：例如，"╲"在我的终端上显示的宽度与其他字符（如 "a"）一样宽，但在浏览器中显示更宽。

这是故意的选择吗？如果是，请受什么启发？如果不是，那么在哪里报告错误呢？

编辑

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

在我上面的截图中，Firefox 和 Chrome 使用 Courier 作为等宽字体，而终端使用 Monaco。在两种情况下，字体似乎都适用于框图绘制字符和 ASCII 字符：当我更改字体时，图形的外观也会随之改变。

当我将终端切换到 Courier 或 Courier New 时，它同样能够良好显示框图绘制字符--在某些方面甚至更好！

当我将任一浏览器切换到 Monaco 时，它仍然无法正确显示框图绘制字符，这是由于某些字符显然显示出比等宽字体更宽的宽度。

因此，似乎浏览器正在出现错误。

- jsharp

---

你是否在使用等宽字体？控制台通常默认使用等宽字体，但浏览器则不然。 - Remy Lebeau

这是 <pre> 元素的一部分，因此周围的 ASCII 文本（包括截图中可见的部分，“Box drawing alignment tests:”）是等宽字体。 - jsharp

Answer 1

当我打开开发者工具时，我看到整个测试都在一个pre元素中。我的系统上使用了几种字体。除了右侧的斜纹图案外，一切看起来都很正常。

如果我删除所有其他文本，那么使用的唯一字体是Consolas，看起来也很好。我认为这取决于您拥有哪些字体，浏览器如何对它们进行优先排序，特别是当它必须使用多个字体时，而且两个等宽字体不一定相同。

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

[Google Chrome 72.0.3626.96 在 Windows 10 上。]

- Tom Blodget

---

感谢您提醒我字体选择的重要性（现在看起来很明显 :-/)。由于这并没有完全解决我的问题，所以我正在编辑问题。 - jsharp

你是否为你的网页浏览器提供了等宽字体，以便所需字符具有相同的宽度？你是否还提供了其他选项，而没有给出一个页面来说明使用哪些字体？我认为这个测试不是为了选择字体，而只是为了定位。 - Tom Blodget

Answer 2

这很可能与https://bugs.debian.org/981577相同。

如果您安装了任何不覆盖Unicode框图范围的旧字体，那么您的浏览器很可能会将它们拼接在一起。虽然每种字体本身可能是等宽的（字体内每个字形的宽度都相同），但字体的组合可能不是等宽的（因为字形宽度在字体之间不同），这就是为什么对齐失败的原因。

我发现在我的系统上卸载旧版Bitstream Vera字体可以解决此问题。（Bitstream Vera已被DejaVu Sans取代）

- dkg