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

Question

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

但是现在我在我的网站上呈现表情符号时有一个奇怪的行为，每个浏览器呈现不同，因此我认为我的字体可能无法加载，也许？

边缘：

火狐：

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

为了安全起见，应始终使用完全合格 表情符号 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 web page, or get a full list of all fully-qualified and non-fully-qualified emoji in the emoji-test.txt 数据文件。

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

My website won't use my custom emoji font (Noto Color Emoji), different behaviour in each browser. Why?

html

css

fonts

emoji