Unicode 键帽显示不正确
Unicode keycap not displaying correctly
为了"quickly"显示一个带框的数字（在HTML中），我可以使用字符U+20E3来实现这个效果：
3⃣1 (0033 20E3 0031)
这应该 work 有 full-width 个字符。但是，当我尝试以下操作时：
字⃣ (5B57 20E3)
字符向左移动。这个例子可以在 here.
找到
为什么会这样？这是platform-dependent吗？还是我误解了这个角色的目的？
我觉得应该是字体问题，你举的例子是这样显示的
我的 mac os 和 chrome。而且我不认为在 enclosing 键帽字符之后附加 unicode 字符 应该有效
组合封闭键帽字符的实用性在很大程度上受到几个因素的限制。这些不限于在 HTML 中使用。事实上，HTML 在这里是无关紧要的，尽管在 HTML 文档中使用这些字符时，您会看到字符在浏览器中呈现的效果（与在文本编辑器中呈现相反，在文字处理器或其他软件）。
首先，组合封闭键帽字符被定义为包含一个 单个 字符，因此尝试将一个字符用于数字序列（如“31”）可能会有些技巧最多。 Unicode FAQ 部分 Characters and Combining Marks 说：
Q: Is it possible to apply a diacritic or combining enclosing mark to
a sequence of more than one (non-combining) character?
A: No, with the exception of the “double diacritics” deliberately
designed to be applied onto a two letter sequence, e.g. U+035D
COMBINING DOUBLE BREVE. Neither ZWJ (U+200D ZERO WITDH JOINER) nor CGJ
(U+034F COMBINING GRAPHEME JOINER) “glue” characters together in a way
that the scope of any following combining character would be affected.
To get a character sequence like “Esc” into something like the U+20E3
COMBINING ENCLOSING KEYCAP, you must resort to higher-level protocols
其次，要使这样的字符起作用，您需要一种包含它的字体。根据我的研究，以下字体包含： U+20E3 COMBINING ENCLOSING KEYCAP：Asana Math、Code2000、FreeMono、FreeSerif、Segoe UI Symbol、Sun-ExtA、Symbola 和 unifont。一个相当短的列表，主要是用户需要自行下载和安装的字体。您可能会在 Unix 和 Linux 系统中找到免费 (GNU FreeFont) 字体，在现代 Windows 系统中找到 Segoe UI 符号，
即使字体包含字符，渲染也可能无法接受。这可能取决于渲染软件（浏览器或其他），但也取决于字体。封闭的字符可能放错地方了。此外，组合字符往往向左移动，可能会叠印前面的字符。虽然您通常可以通过一些填充来处理这个问题，但它的数量将取决于字体。
以下代码说明了问题，reader 的系统使用了以下字体：
<p style="font-family: Asana Math">
Press the 3⃣ key or the 字⃣ key.
<p style="font-family: Code2000">
Press the 3⃣ key or the 字⃣ key.
<p style="font-family: FreeMono">
Press the 3⃣ key or the 字⃣ key.
<p style="font-family: FreeSerif">
Press the 3⃣ key or the 字⃣ key.
<p style="font-family: Segoe UI Symbol">
Press the 3⃣ key or the 字⃣ key.
<p style="font-family: Sun-ExtA">
Press the 3⃣ key or the 字⃣ key.
<p style="font-family: Symbola">
Press the 3⃣ key or the 字⃣ key.
<p style="font-family: unifont">
Press the 3⃣ key or the 字⃣ key.
这个例子说明了一个额外的问题：字符“字”U+5B57 CJK UNIFIED IDEOGRAPH-5B57 (zì) 并不是所有使用的字体都包含的。最严重的是，它没有包含在 FreeSerif 和 Segoe UI 符号中，它们对封闭标记有相当好的实现。将一种字体的基本字符与另一种字体的变音符号组合起来总是一个棘手的游戏。
此外，即使一个字体同时包含这两个字符，结果也可能很糟糕。例如，在Code2000中，“字”不适合键帽字形。
结论是在HTML中，其他键帽符号的制作方法要好得多。即使是在 SO 中用于呈现 kbd 标记的相对简单的技术也会产生更好的结果，并且更加可靠，并且可以让您在键帽内放置多个字符：31、字。您可以修改该技术来创建您喜欢的键帽。
为了"quickly"显示一个带框的数字（在HTML中），我可以使用字符U+20E3来实现这个效果：
3⃣1 (0033 20E3 0031)
这应该 work 有 full-width 个字符。但是，当我尝试以下操作时：
字⃣ (5B57 20E3)
字符向左移动。这个例子可以在 here.
找到为什么会这样？这是platform-dependent吗？还是我误解了这个角色的目的？
我觉得应该是字体问题，你举的例子是这样显示的
我的 mac os 和 chrome。而且我不认为在 enclosing 键帽字符之后附加 unicode 字符 应该有效
组合封闭键帽字符的实用性在很大程度上受到几个因素的限制。这些不限于在 HTML 中使用。事实上，HTML 在这里是无关紧要的，尽管在 HTML 文档中使用这些字符时，您会看到字符在浏览器中呈现的效果（与在文本编辑器中呈现相反，在文字处理器或其他软件）。
首先，组合封闭键帽字符被定义为包含一个 单个 字符，因此尝试将一个字符用于数字序列（如“31”）可能会有些技巧最多。 Unicode FAQ 部分 Characters and Combining Marks 说：
Q: Is it possible to apply a diacritic or combining enclosing mark to a sequence of more than one (non-combining) character?
A: No, with the exception of the “double diacritics” deliberately designed to be applied onto a two letter sequence, e.g. U+035D COMBINING DOUBLE BREVE. Neither ZWJ (U+200D ZERO WITDH JOINER) nor CGJ (U+034F COMBINING GRAPHEME JOINER) “glue” characters together in a way that the scope of any following combining character would be affected. To get a character sequence like “Esc” into something like the U+20E3 COMBINING ENCLOSING KEYCAP, you must resort to higher-level protocols
其次，要使这样的字符起作用，您需要一种包含它的字体。根据我的研究，以下字体包含： U+20E3 COMBINING ENCLOSING KEYCAP：Asana Math、Code2000、FreeMono、FreeSerif、Segoe UI Symbol、Sun-ExtA、Symbola 和 unifont。一个相当短的列表，主要是用户需要自行下载和安装的字体。您可能会在 Unix 和 Linux 系统中找到免费 (GNU FreeFont) 字体，在现代 Windows 系统中找到 Segoe UI 符号，
即使字体包含字符，渲染也可能无法接受。这可能取决于渲染软件（浏览器或其他），但也取决于字体。封闭的字符可能放错地方了。此外，组合字符往往向左移动，可能会叠印前面的字符。虽然您通常可以通过一些填充来处理这个问题，但它的数量将取决于字体。
以下代码说明了问题，reader 的系统使用了以下字体：
<p style="font-family: Asana Math">
Press the 3⃣ key or the 字⃣ key.
<p style="font-family: Code2000">
Press the 3⃣ key or the 字⃣ key.
<p style="font-family: FreeMono">
Press the 3⃣ key or the 字⃣ key.
<p style="font-family: FreeSerif">
Press the 3⃣ key or the 字⃣ key.
<p style="font-family: Segoe UI Symbol">
Press the 3⃣ key or the 字⃣ key.
<p style="font-family: Sun-ExtA">
Press the 3⃣ key or the 字⃣ key.
<p style="font-family: Symbola">
Press the 3⃣ key or the 字⃣ key.
<p style="font-family: unifont">
Press the 3⃣ key or the 字⃣ key.
这个例子说明了一个额外的问题：字符“字”U+5B57 CJK UNIFIED IDEOGRAPH-5B57 (zì) 并不是所有使用的字体都包含的。最严重的是，它没有包含在 FreeSerif 和 Segoe UI 符号中，它们对封闭标记有相当好的实现。将一种字体的基本字符与另一种字体的变音符号组合起来总是一个棘手的游戏。
此外，即使一个字体同时包含这两个字符，结果也可能很糟糕。例如，在Code2000中，“字”不适合键帽字形。
结论是在HTML中，其他键帽符号的制作方法要好得多。即使是在 SO 中用于呈现 kbd 标记的相对简单的技术也会产生更好的结果，并且更加可靠，并且可以让您在键帽内放置多个字符：31、字。您可以修改该技术来创建您喜欢的键帽。