我的网站不会使用我的自定义表情符号字体（Noto Color表情符号），每个浏览器中的行为不同。为什么？

Question

我想在新项目中使用彩色表情符号。因此，我为项目实现了最新的Noto Color Emoji-Font。我的后端在ASP.NET Core btw中。

但是现在在我的网站上呈现表情符号时，我有一个奇怪的行为，每个浏览器都以不同的方式呈现它，因此，我认为可能不会加载我的字体？

边缘：

Firefox：

Chrome浏览器：

应为：

site.css：

/* fonts*/
@font-face {
    font-family: "color-emoji";
    src: local("Noto Color Emoji");
    src: url("./fonts/NotoColorEmoji.ttf");
}
.emoji {
    font-family: 'color-emoji';
}

我认为：

<p class="emoji">‍❤‍ ‍❤‍ ‍❤‍</p>

这个表情符号只是一个例子。

您有什么想法吗？我知道为什么我是工作中的后端开发人员。前端一直在杀我。

Answer 1

为了安全起见，应该始终使用完全合格 emoji表情zwj序列。

代替：

<p class="emoji">‍❤‍ ‍❤‍ ‍❤‍</p>

尝试一下：

<p class="emoji">‍❤️‍ ‍❤️‍ ‍❤️‍</p>

  

❤❤‍ U + 1F469 U + 200D U + 2764 U + FE0F U + 200D U + 1F468

     

❤❤‍ U + 1F468 U + 200D U + 2764 U + FE0F U + 200D U + 1F468

     

❤❤‍ U + 1F469 U + 200D U + 2764 U + FE0F U + 200D U + 1F469

请注意，在❤U + 2764 HEAVY BLACK HEART之后，U + FE0F VARIATION SELECTOR-16会形成适当的红色心脏表情符号...

您可以查看Recommended Emoji ZWJ Sequences, v11.0网页，也可以获取以下所有完全合格和非完全合格表情符号的完整列表emoji-test.txt数据文件。