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

Question

我想在我的新元素中使用彩色表情符号。因此我实现了最新的 Noto Color Emoji -字体到我的元素。顺便说一句，我的后端在 ASP.NET Core 中。

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

边缘:

火狐:

Chrome :

应该是:

网站.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网页，或在 emoji-test.txt 中获取所有完全合格 和不完全合格 表情符号的完整列表数据文件。