Interrobang没有在移动网站上显示

Question

我正在尝试在我的网站上显示Interrobang（‽）字符。它适用于所有桌面浏览器，但不会显示在我的Android手机上。我已尝试过文字字符‽和HTML实体&#8253，但都不起作用。我已将我的字符编码声明为UTF-8。

我创建了一个jsFiddle来证明我的问题。在桌面上，Interrobang应该显示得很好;在我的手机上，它不起作用。

如何在不包含特殊字体的情况下显示此字符？

Answer 1

角色绝对不是日常使用的。如果您的手机没有显示，则表示没有人将其添加到正在使用的字体中。

Answer 2

您所指的维基百科页面Interrobang表示，“很少有现代字体或字体包含interrobang字符的字形”。这是不准确的 - 例如，在PC上，通常至少包含它的Palatino Linotype字体，而在现代PC中，所谓的Microsoft C字体也包含它（参见font coverage上的Fileformat.info页面）。但是例如在Android中，通常只有Droid的字体集合，而且它们没有这个符号。

因此，通过@font-face使用可下载的字体（网络字体）将是唯一的方法，例如机器人显示这个角色（除了那些用户安装了合适的额外字体的机器人，但这些不是你正在寻找的'机器人）。

然而，除了使用图像之外，还有使用“？”和“！”字符以某种方式叠加的解决方法。你可以实现这个目标通过使用否定letter-spacing或在声明为内联块的元素中包含的字符上设置负边距。但可能最好的方法是使用定位：

<style>
.bang { position: relative; }
.excl { position: absolute; left: 0.1em; }
</style>
<span class=bang>?<span class=excl>!</span></span>

0.1em的值是猜测，但可能是相当不错的。关键是在大多数字体中，“！”的前进宽度小于“？”的前进宽度，因此需要向左推一点，以便适当地“重击”问号。这个值似乎适用于Droid Sans和Arial。