Wingdings字体系列在Firefox和Opera浏览器上似乎无法正常工作。

Question

我在CSS中使用Wingdings字体来表示一些符号，例如铅笔和主页图标。

在IE，Chrome和Safari中可以正常工作，但在Firefox和Opera中却不行。我尝试过搜索解决方案，但没有找到更好的方法。

为什么在Firefox中无法正常工作？我确实需要使用这些图标，有没有办法在Firefox中使用Wingdings字体呢？

- niko

Answer 1

Mozilla和Opera符合标准。Wingdings不符合标准(这来自微软真是个惊喜)，因为它没有映射到Unicode，所以不应在网站上使用。

然而，不要绝望，大多数符号都可以在Unicode中找到:请查看http://www.alanwood.net/demos/wingdings.html 重要补充(2014年10月): 截至2014年6月16日发布的Unicode v7，Webdings和Wingdings的所有字符都已添加到Unicode中。请参见下面的评论。

- mddw

---

从Unicode v7开始，Webdings和Wingdings中的所有字符都已添加到Unicode中（[1]，[2]）。 - GSerg

我不理解Alan Wood的页面在谈论什么，也找不到w3c网站上关于“标准”字体的任何信息。使用w3c css验证器似乎可以正确验证wingdings。显然，如果有人使用没有安装特定字体的设备，浏览器会替换为不同的字体，但这不是OP所讨论的问题。 - Andy

有没有一种工具可以将Windings转换为标准的Unicode字符？ - Ky -

@Andy 他们所说的“非标准”实际上是指“不符合标准”。例如，该字体不符合Unicode标准。比如，在UTF-8中，字节0x74应该显示为大写字母J。但是Wingdings却显示一个笑脸。为什么这是个问题呢？因为在用户没有安装目标字体的情况下，字体应该能够优雅地退化。如果字体不符合标准，就无法优雅地退化。任何没有在其计算机上安装Wingdings（一种微软字体）的人将只会看到垃圾文本。 - daiscog

即使正确，这也没有回答OP的问题：为什么它在Firefox中没有显示？ - Michael Piefel

Answer 2

您可以使用Unicode字符，例如

✎

http://www.fileformat.info/info/unicode/char/270e/index.htm

- Joseph Marikle

---

注意：请确保使用支持的字体。在我电脑上安装的字体中，有95%无法正常显示此内容。 - Wesley Murch

更正一下：根据该网站的本地字体测试器，它的支持程度不高，但是将这些字体内联到此页面进行Firebug调试似乎可以工作-事实上我无法使其不起作用，所以这对我来说是一个谜。 - Wesley Murch

Wesley：根据CSS字体匹配规则，当前选定字体中的未知字形会导致以不同字体呈现该字形。 - gsnedders

@gsnedders：听到这个消息太好了，你能给我提供一个相关的参考资料吗？ - Wesley Murch

@gsnedders：非常感谢！更有理由指定像“衬线字体”这样的通用字体系列。 - Wesley Murch

将 font-size 设置为比与 CSS ::after 或 ::before 结合使用的字体更大的值，但不要普遍地将其应用于每个 Unicode 字符，因为它们的呈现大小差异很大。 - John

Answer 3

Wingdings字符可以通过“私人使用区”（代码点U+E000至U+F7FF）以Unicode兼容的方式访问。这些字符代码保留用于任何不属于常规Unicode字符集的特定字体符号，事实上，Wingdings将其所有符号映射到子范围U+F021至U+F0FF。

例如，三角形旗帜在遗留编码中映射为P = 0x50，可以通过U+F050 =  = （HTML）= \F050（CSS）进行访问。

我不确定其他浏览器，但在Firefox 12中可以使用。

- Christoph Lipka

---

这在技术上是正确的，并有助于理解问题的本质，但根据Unicode标准，私用字符不应在信息交换中使用，除非通过私人协议。在这种情况下，如果实际使用的字体与CSS中声明的字体不同，则会显示一个无法显示的通用符号（或者有时是其他字体分配给相同代码位置的任何字符）。 - Jukka K. Korpela

Answer 4

引用一个网站：

有人认为Mozilla应该在默认配置中支持符号字体，因为这是一种有价值的能力；而标准律师则认为不应该支持，因为他们认为这种支持违反了HTML标准。到目前为止，阻碍者占了上风。

http://hutchinson.belmont.ma.us/tth/Wfonts.html

- orangething

---

这是2005年的文章，它还有参考价值吗？对于OP来说，这篇文章有什么有用的建议吗？ - Wesley Murch

Answer 5

@font-face {
  font-family: "Your typeface";
  src: url("type/filename.eot");
  src: local("☺"),
    url("type/filename.woff") format("woff"),
    url("type/filename.otf") format("opentype"),
    url("type/filename.svg#filename") format("svg");
  }

更多内容请点击这里http://nicewebtype.com/notes/2009/10/30/how-to-use-css-font-face/

在你的HTML中使用简单的解决方案

<style type="text/css">
@font-face {
    font-family: "Ace Crikey";
    src: url(ace.ttf);
}
.ace {
    font-family: "Ace Crikey";
    font-size: 230%;
}
</style>

- Grumpy

Answer 6

您可以使用Gimp或其他图形软件，并从Wingdings字体中制作所需图标的一些GIF。

- Eddy Freddy