Unicode表情符号在浏览器中不可见(显示正方形)

时间:2018-06-23 10:57:32

标签: css angular typescript unicode emoji

我正在尝试在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中,Symbol字体的字体是

 @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代码编辑器。有人知道这里出什么问题吗?

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

smiley: any = '';

然后在模板中输入它:

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

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

更新2: 这似乎是Chrome问题。我测试了一些随机的笑脸,到目前为止,Chrome中的select标记只能使用unicode 7.0到10.0(https://emojipedia.org/unicode-7.0/)的表情符号,而旧版本则不能。但是,其他版本的表情符号会显示在“普通”标签中,例如段落标签。只是不在选择菜单的选项标签中。我要使用的所有表情符号都是Unicode版本6.0和6.1的一部分 有人知道如何解决这个问题吗?

更新3: 因此,我在下拉菜单中添加了一些表情符号,然后重新启动了Angular和Chrome。表情符号全部显示,甚至是unicode 6版的表情符号。但是,如果刷新(F5)页面,菜单中的6版表情符号就会消失。所以我想我的问题现在解决了一半:

enter image description here

1 个答案:

答案 0 :(得分:0)

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

很明显,我安装了Chrome扩展程序(Chromoji),据说可以在Chrome中使用较新的表情符号。这样做是因为表情符号与该扩展名看起来有所不同(可以看到更新的表情符号unicode)。我删除了扩展名,现在只看到较旧的版本,但是至少所有表情符号现在一直可见。

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