字体自定义不呈现 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 图标精灵。

cross-compatible - 并且愉快工作。

"SVG seems to just work (when supported). Icon fonts seem to fail in weird ways. For instance, you map the characters to normal letters, then the font loading fails and you get random characters abound. Or you map to "Private Use Area”，一些浏览器决定 re-map 它们变成非常奇怪的字符，比如玫瑰，但很难复制。或者你想托管 @font-face CDN 上的文件，但那是 cross-origin 而 Firefox 讨厌它，所以你需要你的服务器提供正确的 cross-origin headers，但你的 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/

如果你有一个小片段，这些实现起来真的很快。

图标字体有太多异常需要解释。

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

Font Custom Not Rendering Fonts in Chrome

css

google-chrome

fonts

gruntjs