我最近发现 this historical document ,它声称可以作为对任何显示它的应用程序的 UTF-8 编码的测试。
当我将它粘贴到我的终端 (iterm2) 中时,它会在最后加载精美的方框图(右下角的一对除外):
但是在 Chrome 和 Firefox 中,它们都是歪曲的,而且显然是错误的:
似乎区别与渲染字符的宽度有关:例如,“╲”在我的终端中显示的宽度与“a”等其他字符一样宽,但在浏览器中显示的更宽。
这是一个深思熟虑的选择,如果是这样,是什么启发了它?如果没有,提交错误的正确位置在哪里?
编辑
感谢 Tom Blodget's answer ,我现在意识到字体是一个重要的考虑因素。我会澄清:
在我上面的截图中,Firefox 和 Chrome 使用 Courier 作为等宽字体,而终端使用 Monaco。在这两种情况下,字体似乎与 ASCII 字符一样适用于框绘图字符:当我更改字体时,绘图的外观以及周围文本的外观也会发生变化。
当我将终端切换到 Courier 或 Courier New 时,它同样能很好地显示盒子图纸——在某些方面更好!
当我将任一浏览器切换到 Monaco 时,它仍然显示错误的方框图,同样是因为字符显然以比等宽宽度更宽的宽度显示。
所以看起来浏览器还是做错了。
最佳答案
当我去开发工具时,我看到整个测试是一个 pre
元素。我的系统上正在使用几种字体。除了右侧的阴影图案外,一切看起来都不错。
如果我删除所有其他文本,则使用的唯一字体是 Consolas,它看起来不错。我认为这取决于您拥有哪些字体,浏览器如何优先考虑它们,尤其是当它必须使用多个字体时,并且(推测)两种等宽字体不需要具有相同的宽度。
终端可能不太擅长使用多种字体,而是使用一种固定字体或为所需字符选择一种“最佳”匹配。
[Windows 10 上的 Google Chrome 72.0.3626.96。]
关于browser - unicode box-drawing 在浏览器中无法正确呈现,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54718201/