logo标签列表

我应该使用哪种字体来显示最新的Unicode字符？

htmlgoogle-chromeunicodefonts
5
注�：它们并�是新的。�是“�被支��，以��方�。
我正在å°�试为我的网站上的一个元素制作简å�•çš„æ�§ä»¶ï¼Œæ¯”如一个简å�•çš„“é�™éŸ³â€�或“å�–消é�™éŸ³â€�æ�§ä»¶ã€‚然而，我没有找到任何能够处ç�†è¾ƒæ–°çš„Unicode符å�·çš„字体，例如扬声器符å�·ï¼ˆ&#x1F507 到 🔊 或 🔇 到 🔊），å�³ä½¿åœ¨ Stack Overflow 上也无法正常显示（🔇 🔈 🔉 🔊），但ä»�然å�¯ä»¥åœ¨æˆ‘çš„PDF阅读器和Internet Explorer中显示，但ä¸�能在Chrome中显示。
这是�我的角度�看的第一段文字（上�），其中字符已���： Definitely not working.
无论如何，这是我的代码片段。（视频控件处于普通视图以进行测试）。实际元素附有z-index: -1000，作为视频背景。 

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

function unmute() {
  document.getElementById("jsControl").setAttribute ("href", "javascript:mute()");
  document.getElementById("jsControl").innerHTML = "🔊";
  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和/或其他浏览器的问题。

2个回答
2

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

然而，如果您真的想使用字符，则有一组非常有限的字体可供考虑。根据fileformat.info，U+1F507仅受Quivira、Symbola、Segoe UI Symbol和Segoe UI Emoji支持。后两个是专有字体，仅在相对较新的Windows版本中提供，并且存在不同的变体（例如，我的Windows 7缺少Segoe UI Emoji，而具有缺少该字符的Segoe UI Symbol的变体）。

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

1

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

/*
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来解决。 - Panagiotis Kanavos
字体仅以 .woff 格式分发，并且似乎禁止转换。此外，它似乎不包含问题中提到的任何字符。 - Jukka K. Korpela
@JukkaK.Korpela，它确实包含那些字符，我已经检查过了。但当然这只是一个建议，还有其他字体可供选择。 - Karol S
@KarolS，我实际测试了在该字体中尝试呈现这些字符时会发生什么，并且失败了。我还使用字体检查器检查了该字体中按Unicode编号排序的最后一个字符是U+3299。 - Jukka K. Korpela
我知道这是 @font-face。我只是输入错误了。 - Timothy
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接