如何在html中正确显示这些字符?

时间:2014-12-30 23:58:12

标签: javascript html unicode instagram

我正在使用Instagram API,下面是我从IG回来代表用户名字的两个字符的示例。

在我的网页的HTML中,它们显示为问号,但如果您将它们复制并粘贴到任何文本编辑器中,它们将显示为一个心脏和一朵花。

如何在HTML中正确显示这些和其他符号?

3 个答案:

答案 0 :(得分:2)

字符为U + 1F49B YELLOW HEART和U + 1F33B SUNFLOWER。它们作为编码字符相对较新(虽然使用其他技术实现的表情符号稍微有点旧),并且很少有字体包含它们:Segoe UI Symbol,Segoe UI Emoji,Quivira,Symbola,以及其他一些非常新的或专用字体。 Segoe UI字体在新版本的Windows中可用,可能取决于更新的安装(Microsoft现在通过Windows更新机制提供一些字体和字体扩展)。另外两种是用户可以下载和安装的免费字体,但它们可能没有预先安装在任何计算机上。

因此,如果用户的系统缺少这些字体,则不会出现字符;相反,会显示一些不具代表性的字符的指示符。

还有一个问题。虽然浏览器需要扫描所有已安装的字体以查找字符的字形,但它们通常无法正确执行此操作,尤其是对于或多或少具有异国情调的字符。在Win 7上测试没有测试文档中的任何字体设置,我发现这些字符是由IE和Firefox显示的,但不是由Chrome显示。可以通过明确指定字体列表来解决此问题:



.emoji {
  font-family: Segoe UI Emoji, Segoe UI Symbol,
    Symbola, Quivira;
}

<span class=emoji></span>
&#13;
&#13;
&#13;

要覆盖缺少这些字体的用户系统,您需要通过@font-face使用可下载的字体,在实践中使用Symbola或Quivira。它们是相当大的字体,因此使用图像可能是一个更可行的选项 - 特别是因为那时你可以使用彩色图像。 (原则上,您可以使用变体选择器控制字符来要求渲染软件为字符使用表情符号样式的颜色字形,但字体似乎不包含这样的字形,除了浏览器可能无法使用它们,即可能缺乏对变体选择器的支持。)

答案 1 :(得分:0)

由于您无法正确显示其浏览器,因此您可以下载Chrome插件Emoji Plugin

编辑:另一个解决方案是获取进入的表情符号的unicode,然后显示图像。这需要您将表情符号下载为图像。

答案 2 :(得分:-1)

可悲的是,你无能为力。您必须等待所有浏览器采用这些HTML5实体。

IE 11是目前唯一一款显示所有HTML5实体的浏览器。我在IE 11中查看了这个页面并且它们出现了。例如,在Chrome中,它们不显示。