Unicode 表情符号在浏览器中不可见（显示一个正方形）答案

【问题标题】：Unicode emoji not visible in browser (shows a square)Unicode 表情符号在浏览器中不可见（显示一个正方形）
【发布时间】：2018-12-02 16:08:57
【问题描述】：

我正在尝试在我的 Angular 6 项目的下拉（选择标签）菜单中获取表情符号。我为此使用unicode。到目前为止，我只能展示一些表情符号（如♥）。我想要这样的表情符号：????????????但我在浏览器中看到的只是一个空方块。

我尝试创建一个简单的纯 html 文件，然后表情符号全部显示在下拉菜单中。但是，当我尝试在角度模板中实现它时，它不再起作用了。我还尝试下载 Symbola 字体并将其添加到 CSS 中，但也没有运气。

这是模板：

<div class="postContainer postContent bg-dark" style="width: 80%;">
  <form class="postForm" [formGroup]="newPost" (ngSubmit)="saveNewPost()">

    <label class="text-warning label">Smiley</label>
    <select formControlName="smiley" class="custom-select mr-sm-2 col form-control-lg" id="inlineFormCustomSelect"
            [ngClass]="{ 'is-invalid': submitted && f.smiley.errors }">

      <option selected>Choose...</option>

      <!-- Attempt with the Symbola emoji font -->
      <option value="Smiley1"><span class="emoji">&#x1F604;</span></option>

      <!-- Attempt without the Symbola emoji font -->
      <option value="Smiley2">&#x1F604;</option>

    </select>
  </form>
</div>

在我的 styles.css 中 Symbola 字体的字体

 @font-face {
   font-family: "emoji", "Symbola";
   src: url("./assets/fonts/emoji/Symbola-Emoji.woff") format("woff"),
        url("./assets/fonts/emoji/Symbola-Emoji.ttf") format("ttf");
  }

在模板的 CSS 文件中添加 Sybmola 和 emoji 字体：

.emoji {
  font-family: "emoji", "Symbola";
}

奇怪的是它在一个单独的 html 文件中工作，但不在我的 Angular 项目中。如果这很重要，我正在使用 Visual Studio Code 编辑器。有谁知道这是什么问题？

更新 1： 如果我复制表情符号本身并将其放在组件中的变量中：

smiley: any = '????';

然后在模板中输入：

 // Form and select tags...
 <option value="Smiley2">{{smiley}}</option>

它在 Firefox 的下拉菜单中显示笑脸，但在 Chrome 中不显示。

更新 2： 这似乎是一个 Chrome 问题。我测试了一些随机的笑脸，到目前为止，只有从 unicode 7.0 到 10.0 (https://emojipedia.org/unicode-7.0/) 的表情符号适用于 Chrome 中的 select 标签，旧版本不适用。然而，来自其他版本的表情符号确实出现在“普通”标签中，如段落标签。只是不在选择菜单的选项标签中。我想使用的所有表情符号都是 unicode 版本 6.0 和 6.1 的一部分有谁知道如何解决这个问题？

更新 3： 所以我在下拉菜单中添加了一些表情符号并重新启动了 Angular 和 Chrome。表情符号全部显示，即使是来自 unicode 版本 6 的表情符号。但是，如果我刷新 (F5) 页面，来自版本 6 的表情符号将从菜单中消失。所以我想我的问题现在解决了一半：

【问题讨论】：

标签： css angular typescript unicode emoji

【解决方案1】：

不是真正基于代码的答案，但我找到了 Chrome 的解决方案。

显然，我安装了 Chrome 扩展程序 (Chromoji)，据说它允许在 Chrome 中使用更新的表情符号。确实如此，因为表情符号与该扩展名看起来不同（新的表情符号 unicode 可见）。我删除了扩展程序，现在我只能看到旧版本，但至少现在所有表情符号都是可见的。

这几天让我头疼。我希望 Google 有一天能解决他们的表情符号问题。

【讨论】：