html - 如何在边缘使用表情符号

Question

我有这个代码:

<option> &#x1F1E9;&#x1F1EA; Deutsch</option>
or 
<option> &#127465;&#127466; Deutsch</option>

我在 Firefox 上得到了这个:

但在 Edge 上它看起来像这样:

我做错了什么？

Answer 1

遗憾的是，Windows 没有包含彩色标志连字的系统表情符号字体(以及更多来自表情符号领域的字形)。因为 Chrome 和 Edge 依赖于系统字体，所以我们看到的是那些简单的字符而不是连字。
Firefox(仍然)基于 Twitter(“Twemoji Mozilla”)嵌入了它自己的漂亮的后备表情符号字体来缓解这种情况。所以让它跨浏览器工作的唯一方法是提供 webfont。
有一个很好用的 Mozilla 的 Twemoji 字体，由 Maxime Euziere 在 https://xem.github.io/unicode13/emoji.html 编译用于网络使用:

/*
Licenses for TwemojiMozilla.ttf: https://github.com/mozilla/twemoji-colr/blob/master/LICENSE.md#license-for-the-visual-design
Derived from: https://twemoji.twitter.com/
Source: https://xem.github.io/unicode13/emoji.html 
*/
@font-face {
  font-family: "Twemoji from xem.github.io";
  src: url("https://xem.github.io/unicode13/Twemoji.ttf") format("truetype");
  unicode-range: U+00A9-E007F;
  /* @see https://github.com/mozilla/twemoji-colr/issues/56 */
}

:root {
  font-family: "Twemoji from xem.github.io", Segoe UI Emoji, Segoe UI Symbol, Segoe, sans-serif;
}

<p>&#x1F1E9;&#x1F1EA; Deutsch