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

标签 browser unicode utf-8

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

当我将它粘贴到我的终端 (iterm2) 中时,它会在最后加载精美的方框图(右下角的一对除外):

correctly rendered unicode box drawings

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

incorrectly rendered unicode box drawings

似乎区别与渲染字符的宽度有关:例如,“╲”在我的终端中显示的宽度与“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/

相关文章:

html - 某些计算机上不显示 Unicode 字符(六边形)

Python UnicodeDecodeError : 'utf-8' codec can't decode byte

Python:从标准输入读取gzip

caching - 如何防止单击后退按钮后表单字段重新填充?

javascript - 如何使浏览器在单个页面布局上前后工作?

vba - 获取带有 Unicode 文件名的完整路径

c# - XML - 帮助 RSS UTF-8 支持

browser - 是否可以使用 Cypress 将 `postMessage` 发送到应用程序?如何传递通过 `postMessage` 接收的数据?

java - Webscarab 拒绝与所有浏览器连接

regex - 如何匹配 perl 正则表达式 (regexp) 中的重音和波浪号字符?