我应该为最新的 Unicode 字符使用哪种字体？

Question

注意：它们不是新的。只是 "not supported"，不知何故。

我正在尝试为我网站上的一个元素制作简单的控件，就像简单的 "mute" 或 "not mute" 控件一样。
但是，我还没有找到任何能够处理较新的 Unicode 符号的字体，例如扬声器符号（&#x1F507 到 🔊，或 🔇 到 🔊 ) 即使在 Stack Overflow 上也已损坏 (🔇 🔈 🔉 🔊)，但仍然 - They can be found in the Unicode character listings 并且能够以某种方式显示在我的 PDF 中 reader和 Internet Explorer，但不是 Chrome.

从我的角度来看，这是第一段（以上），其中的字符已损坏：

无论如何，这是我的代码片段。（出于测试目的，视频控件处于清晰视图中）。实际元素附加了一个 z-index: -1000；用作视频背景。

function mute() {
  document.getElementById("jsControl").setAttribute ("href", "javascript:unmute()");
  document.getElementById("jsControl").innerHTML = "&#x1F508;";
  document.getElementById("videoPlayer").volume = 0.0
  };

function unmute() {
  document.getElementById("jsControl").setAttribute ("href", "javascript:mute()");
  document.getElementById("jsControl").innerHTML = "&#x1F50A;";
  document.getElementById("videoPlayer").volume = 1.0
  };

<html>
  <head>
    <style>
        body {
            font-family: [Insert font names and attempts];
        }
    </style>
  </head>
  <body>
    <video id="videoPlayer" src="..."></video>
    <a id="jsControl" href="javascript:unmute()">&#x1F508;</a>
  </body>
</html>

我尝试过不同的网络安全字体，例如 Arial、Times New Roman 和 Tahoma 以及 Sergoe UI。

问题：是否可以使用任何字体来支持 在 Chrome 上 工作的那些 unicode 字符？
（即使是将这些重新映射到像 Wingdings 这样的常规字母上的字体也会被接受，因为它们可以使用 @font-face { ... } 附加。）

此外，请不要抱怨损坏的 Javascript（如果写得不正确）- 我可以自己修复。这是字体；我担心的文本（缺少符号）。

更新： 在 Internet Explorer 中查看图标效果很好。似乎是 chrome-and/or-other-browser 类问题。

Answer 1

您不应该假设浏览您网站的人安装了必要的字体。相反，您应该添加外部字体。找到具有适当许可证并包含所需符号的字体（例如 http://emojisymbols.com/），并将其添加到 CSS 中，与 @font-face 声明一样：

/*
EmojiSymbols Font (c)blockworks - Kenichi Kaneko
http://emojisymbols.com/
*/
@font-face {
    font-family: "EmojiSymbols";
    src: url('EmojiSymbols-Regular.woff') format('woff');
    text-decoration: none;
    font-style: normal;
}
.controlIcon {
    font-family: "EmojiSymbols";
}

Answer 2

由于您只会在特殊上下文中使用一些符号，而不是作为文本字符，因此实际的选择是使用图像。

但是，如果您真的想使用字符，可以考虑的字体集非常有限。根据 fileformat.info，U+1F507 仅受 Quivira、Symbola、Segoe UI Symbol 和 Segoe UI Emoji 支持。后两种是专有字体，仅在 Windows 的相对新版本中可用，并且作为不同的变体（例如，我的 Windows 7 缺少 Segoe UI Emoji 并且具有 Segoe UI 缺少字符的符号).

因此，唯一合理的方法是通过 @font-face 使用 Quivira 或 Symbola 作为可下载字体。由于它们是相当大的字体，并且您需要以不同的字体格式为它们提供跨浏览器功能，因此这种方法几乎不是一个实用的选择（除非您有许多其他特殊字符，可能在文本中使用，也需要这种特殊的字体）。

我应该为最新的 Unicode 字符使用哪种字体？

Which font should I use for the newest Unicode characters?

html

unicode

fonts

google-chrome