Unicode 键帽无法正确显示

Question

要“快速”显示盒装数字（在 HTML 中），我可以使用字符 U+20E3 来实现此效果：

\n\n

3\xe2\x83\xa31  (0033 20E3 0031)\n

\n\n

\n\n

这应该适用于全角字符。但是，当我尝试以下操作时：

\n\n

\xe5\xad\x97\xe2\x83\xa3  (5B57 20E3)\n

\n\n

\n\n

字符向左移动。这个例子可以在这里找到。

\n\n

为什么会发生这种情况？这与平台相关吗？还是我误解了这个角色的目的？

\n

Answer 1

组合封闭键帽字符的实用性很大程度上受到几个因素的限制。这些不限于在 HTML 中使用。事实上，HTML 本身在这里是无关紧要的，尽管在 HTML 文档中使用这些字符时，您将在浏览器中看到字符渲染的效果（与在文本编辑器、文字处理器或其他软件中渲染相反） 。

\n\n

首先，组合封闭键帽字符被定义为封闭单个字符，因此尝试将一个字符用于像 \xe2\x80\x9c31\xe2\x80\x9d 这样的数字序列最多可能需要一些技巧。Unicode 常见问题解答部分字符和组合标记说：

\n\n

\n

问：是否可以对多个（非组合）字符的序列应用变音符号或组合封闭标记？

\n\n

答：不，除了\xe2\x80\x9c 双变音符号\xe2\x80\x9d 特意\n 设计用于两个字母序列，例如U+035D\n 组合双布雷夫。ZWJ (U+200D ZERO WITDH JOINER) 和 CGJ\n (U+034F COMBINING GRAPHEME JOINER) \xe2\x80\x9cglue\xe2\x80\x9d 字符都不会以任何后续组合字符的范围的方式组合在一起\n受到影响。\n 要将 \xe2\x80\x9cEsc\xe2\x80\x9d 等字符序列转换为 U+20E3\n 组合封闭键帽，必须求助于更高级别的协议

\n

\n\n

其次，要使这样的字符起作用，您需要包含它的字体。根据我的研究，以下字体包含：U+20E3 COMBINING ENCLOSING KEYCAP：Asana Math、Code2000、FreeMono、FreeSerif、Segoe UI Symbol、Sun-ExtA、Symbola 和 unifont。列表相当短，大部分字体需要用户自己下载和安装。您可能会发现 Unix 和 Linux 系统中预装了免费 (GNU FreeFont) 字体，而现代 Windows 系统中预装了 Segoe UI Symbol，

\n\n

即使字体包含该字符，渲染也可能是不可接受的。这可能取决于渲染软件（浏览器或其他），但也取决于字体。所包含的字符可能严重错位。此外，组合字符往往会向左移动，可能会叠印前面的字符。尽管您通常可以通过一些填充来处理此问题，但其数量将取决于字体。

\n\n

以下代码说明了有关 reader\xe2\x80\x99s 系统使用的字体的问题：

\n\n

\r\n

\r\n

<p style="font-family: Asana Math">\r\nPress the 3\xe2\x83\xa3 key or the \xe5\xad\x97\xe2\x83\xa3  key.\r\n<p style="font-family: Code2000">\r\nPress the 3\xe2\x83\xa3 key or the \xe5\xad\x97\xe2\x83\xa3  key.\r\n<p style="font-family: FreeMono">\r\nPress the 3\xe2\x83\xa3 key or the \xe5\xad\x97\xe2\x83\xa3  key.\r\n<p style="font-family: FreeSerif">\r\nPress the 3\xe2\x83\xa3 key or the \xe5\xad\x97\xe2\x83\xa3  key.\r\n<p style="font-family: Segoe UI Symbol">\r\nPress the 3\xe2\x83\xa3 key or the \xe5\xad\x97\xe2\x83\xa3  key.\r\n<p style="font-family: Sun-ExtA">\r\nPress the 3\xe2\x83\xa3 key or the \xe5\xad\x97\xe2\x83\xa3  key.\r\n<p style="font-family: Symbola">\r\nPress the 3\xe2\x83\xa3 key or the \xe5\xad\x97\xe2\x83\xa3  key.\r\n<p style="font-family: unifont">\r\nPress the 3\xe2\x83\xa3 key or the \xe5\xad\x97\xe2\x83\xa3  key.

\r\n

\r\n

\r\n

\n\n

该示例说明了另一个问题：字符 \xe2\x80\x9c\xe5\xad\x97\xe2\x80\x9d U+5B57 CJK UNIFIED IDEOGRAPH-5B57 (z\xc3\xac) 未包含在所有使用的字体中。最严重的是，它没有包含在 FreeSerif 和 Segoe UI Symbol 中，它们对封闭标记有相当好的实现。将一种字体的基本字符和另一种字体的变音符号组合起来始终是一个棘手的游戏。

\n\n

此外，即使字体包含这两个字符，结果也可能很糟糕。例如，在 Code2000 中，\xe2\x80\x9c\xe5\xad\x97\xe2\x80\x9d 不适合键帽字形。

\n\n

结论是，在 HTML 中，其他生成键帽符号的方法要好得多。即使是 SO 中使用的相对简单的技术来渲染kbd标记也会产生更好的结果并且更加可靠，并且允许您将多个字符放入键帽中：31, \xe5\xad\x97。您可以修改技术来创建您喜欢的键帽。

\n