浏览器中无法显示Unicode表情符号（显示一个方块）

Question

我正在�试在我的Angular 6项目中的下拉��（select标签）中��表情符�。我使用unicode���。到目�为止，我�能显示一些表情符�（如♥）。我想�这样的表情符�：😄�😡，但我在�览器中看到的�是一个空方�。

我�试创建一个简�的�普通的html文件，然�所有的表情符�都会显示在下拉��中。然而，当我�试将其��在angular模�中时，它就��起作用了。 我还�试下载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-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文件中添加符号和表情字体：

.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的选择标签中使用，旧版本则无法使用。其他版本的表情符号确实会出现在“普通”标记（如段落标记）中。只是没有在选择菜单的选项标记中出现。我想使用的所有表情符号都是Unicode版本6.0和6.1的一部分。 有人知道如何解决这个问题吗？

更新3： 所以我添加了一些表情符号到下拉菜单中，并重新启动了Angular和Chrome。所有表情都显示出来了，包括Unicode版本6的那些。然而，如果我刷新页面（F5），版本6的表情符号就会从菜单中消失。所以我想我的问题现在解决了一半：

- Isoldhe

Answer 1

这不是基于代码的答案，但我发现了Chrome的解决方案。

显然，我安装了一个Chrome扩展程序（Chromoji），它据说可以在Chrome中使用更新的表情符号。确实如此，因为使用该扩展程序时表情符号看起来不同（新的表情符号Unicode可见）。我删除了该扩展程序，现在只能看到旧版本，但至少所有表情符号现在都能一直显示了。

这对我来说已经是个烦恼了好几天。我希望Google有一天能解决他们的表情符号问题。

- Isoldhe