Question

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

我正在尝试对我网站上的元素进行简单的控制，方法是简单的“静音”或“静音”控制。
但是，我无法找到任何能够处理较新Unicode符号的字体，例如扬声器符号（&#x1F507到🔊或🔇到🔊 ）即使在Stack Overflow上也被破坏了（???，），但仍然 - They can be found in the Unicode character listings并且能以某种方式显示在我的PDF阅读器和Internet Explorer中，但不能显示在Chrome中。

这是第一段（上图），从我的角度来看，字符被破坏了： Definitely not working.

无论如何，这是我对代码的嗤之以鼻。（视频控件在平面视图中用于测试目的）。实际元素附加了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和/或其他浏览器类型的问题。

Answer 1

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

但是，如果你真的想使用字符，那么要考虑的字体集非常有限。根据{{3}}，只有Quivira，Symbola，Segoe UI Symbol和Segoe UI Emoji支持U + 1F507。后两者是专有字体，仅在相对新版本的Windows中可用，并且作为不同的变体（例如，我的Windows 7缺少Segoe UI表情符号并且具有缺少该字符的Segoe UI符号的变体）。

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

Answer 2

您不应该认为查看您网站的人员安装了必要的字体。相反，您应该添加外部字体。查找具有相应许可证并包含所需符号的字体（例如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";
}

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

2 个答案: