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

【问题标题】：Which font should I use for the newest Unicode characters?我应该为最新的 Unicode 字符使用哪种字体？
【发布时间】：2015-03-25 20:12:49
【问题描述】：

注意：它们不是新的。只是“不支持”，不知何故。

我正在尝试为我网站上的元素制作简单的控件，类似于简单的“静音”或“非静音”控件。
但是，我找不到任何能够处理较新的 Unicode 符号的字体，例如损坏的扬声器符号（&#x1F507 到 &#x1F50A;，或 &#128263; 到 &#128266;）（？？？ ? ???? ???? ????) 即使在 Stack Overflow 上，但仍然 - They can be found in the Unicode character listings 并且能够以某种方式显示在我的 PDF 阅读器和 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 和/或其他浏览器的问题。

【问题讨论】：

标签： html google-chrome unicode fonts

【解决方案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";
}

【讨论】：

这本质上是 Chrome 对 Emoji 的不完整支持的一种解决方法。预计 2015 年 2 月 Chrome 41 将支持 Mac OS X，而 Windows 则一无所知。这应该使用 polyfill 解决，例如 [this one ](gist.github.com/josh/0661f198c62d872e0d3a)
字体仅以.woff 格式分发，似乎禁止转换。此外，它似乎不包含问题中提到的任何字符。
@JukkaK.Korpela 它确实包含这些字符，我检查了。但当然这只是一个建议，还有其他字体。
@KarolS，我实际上测试了尝试以该字体呈现这些字符时会发生什么，但它失败了。我还通过字体检查器检查了该字体中的最后一个字符（按 Unicode 编号）是 U+3299。
我知道是@font-face。我刚才输入错了。

【解决方案2】：

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

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

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

【讨论】：