Unicode无法正确显示

时间:2015-01-01 06:21:54

标签: html unicode

要“快速”显示一个盒装数字(用HTML格式),我可以使用字符U + 20E3来达到这个效果:

3⃣1  (0033 20E3 0031)

enter image description here

这应该是work全角字符。但是,当我尝试以下内容时:

字⃣  (5B57 20E3)

enter image description here

角色向左移动。可以找到此示例here

为什么会这样?这个平台依赖吗?还是我误解了这个角色的目的?

2 个答案:

答案 0 :(得分:2)

组合封闭键帽字符的用处基本上受到几个因素的限制。这些不仅限于在HTML中使用。事实上,HTML在这里是无关紧要的,但是当在HTML文档中使用这些字符时,您将在浏览器中看到字符呈现的效果(与文本编辑器,文字处理器或其他软件中的呈现相反)

首先,组合封闭键帽字符被定义为包含单个字符,因此尝试使用一个像“31”这样的数字序列最多可以使用一些技巧。 Unicode常见问题解答部分Characters and Combining Marks说:

  问:是否可以使用变音符号或组合封闭标记   一个多个(非组合)字符的序列?

     答:不,除了“双变音符号”之外,故意   设计用于两个字母的序列,例如U + 035D   结合双倍的力量。既不是ZWJ(U + 200D ZERO WITDH JOINER)也不是CGJ   (U + 034F COMBINING GRAPHEME JOINER)在某种程度上“粘合”字符   以下任何组合字符的范围将受到影响。   将像“Esc”这样的字符序列变成类似U + 20E3的字符序列   组合ENCLOSING KEYCAP,您必须采用更高级别的协议

其次,要使这样的角色起作用,你需要一个包含它的字体。根据我的研究,以下字体包含:U + 20E3 COMBINING ENCLOSING KEYCAP:Asana Math,Code2000,FreeMono,FreeSerif,Segoe UI Symbol,Sun-ExtA,Symbola和unifont。一个相当短的列表,主要是用户需要自己下载和安装的字体。您可能会发现Unix和Linux系统中的Free(GNU FreeFont)字体和现代Windows系统中的Segoe UI Symbol已预先安装,

即使字体包含该字符,渲染也可能是不可接受的。这可能取决于渲染软件(浏览器或其他),但也取决于字体。封闭的角色可能是错误的错位。而且,组合字符往往向左移动,可能叠加前面的字符。虽然你通常可以用一些填充来处理它,但它的数量将取决于字体。

以下代码说明了读者系统使用字体的问题:

<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 Symbol中,它们具有相当好的封闭标记实现。将一种字体的基本字符和另一种字体的变音符号组合起来总是一个棘手的游戏。

此外,即使字体包含两个字符,结果也可能不好。例如,在Code2000中,“字”只是不适合键帽字形。

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

答案 1 :(得分:0)

我认为它更像是一个字体问题,你给出的例子就像这样 enter image description here

在带有chrome的mac os上。而且,我认为在封闭的键帽字符应该有效工作之后附加unicode字符