Chrome中的字体自定义不呈现字体

Question

只有在关闭开发者工具时才会在Chrome中出现问题。

基本上，你可以从上面看到有时候不会输出自定义字体的图标。

对于那些无法看到图片的人，正在输出通过css :before内容输出的图标，例如ï…ˆ而不是图标。

以下是css输出的示例：

.blog_module #page_content .social_buttons ul li.facebook a:before, .blog_module #pre_content .social_buttons ul li.facebook a:before {
  content: "ï„";
  font-family: 'icons';
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

我知道内容是ï„个人我不确定为什么fontcustom会以这种方式输出它，但9/10可以正常工作。

我认为这可能是字符编码？但为什么它偶尔会发生呢？

有谁知道这是什么以及如何解决它？

我还认为可能没有及时下载，但是一旦字体下载后它就不会改变了吗？那通常发生的事情......

任何想法，建议或答案，我都将非常感激！

Answer 1

听起来你有一些很好的建议，但我给你的答案是 - 不要使用图标字体。

如果你结帐fontastic.me - 可以选择输出SVG图标精灵。

它更加交叉兼容 - 和快乐一起使用。

“SVG似乎正常工作（支持时）。图标字体似乎以奇怪的方式失败。例如，你将字符映射到普通字母，然后字体加载失败，你得到随机字符。或者你映射到“私人使用区”和一些浏览器决定将它们重新映射到真正奇怪的角色，如玫瑰，但它很难复制。或者你想在CDN上托管@ font-face文件，但这是跨域而Firefox讨厌那么，你需要你的服务器提供正确的跨源头文件，但你的Nginx设置并没有正确选择，SIGH。“ - 克里斯科伊尔

文章：http://css-tricks.com/svg-sprites-use-better-icon-fonts/

和Ian Feather的另一个好消息：http://ianfeather.co.uk/ten-reasons-we-switched-from-an-icon-font-to-svg/

如果你得到一些小片段，那么这些片段实现起来很快。

图标字体只有太多的异常需要考虑。