使用@font-face 无法正确显示自定义字体

Question

经过多次审查，我无法正确显示通过 fontsquirrel 创建的自定义字体。 Chrome 的 Inspector 显示该图标已到位，但我得到的只是这个默认图标框；o( Rails 4 应用程序，引导程序

有什么想法吗？

应用程序.rb：

config.assets.paths << Rails.root.join("app", "assets", "fonts")

html:

<div class="hatfont icon-balloon01"></div>

这是我的 CSS：

hatfont {
  font-family: 'haticon';
  text-transform: uppercase;
  div {
    font-family: haticon;
  }
}
@font-face {
  font-family: 'haticon';
  src:assets-url('fonts/haticon.eot');
  src:assets-url('fonts/haticon.eot?#iefix') format('embedded-opentype'),
    assets-url('fonts/haticon.woff') format('woff'),
    assets-url('fonts/haticon.ttf') format('truetype'),
    assets-url('fonts/haticon.svg#haticon') format('svg');
  font-weight: normal;
  font-style: normal;
}

[class^="icon-"], [class*=" icon-"] {
  font-family: 'haticon';
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-graphs:before {
  content: "\e600";
}

Answer 1

我自己也遇到过这个问题。我无法从您提供的内容中具体确定问题，但我想到了一些事情。检查您的 CSS 中的链接引用。确保没有文件被移动，并且您的样式表与字体文件夹位于同一目录中。此外，您的字体下的 %> 看起来不合适......我不知道这是否是 Rails 的事情。这是我之前使用过的一个例子。显然，您需要替换字体文件。 ：

@font-face {
    font-family: 'FontAwesome';
    src: url('fonts/fontawesome-webfont.eot?v=4.0.3');
    src: url('fonts/fontawesome-webfont.eot?#iefix&v=4.0.3') format('embedded-opentype'),url('fonts/fontawesome-webfont.woff?v=4.0.3') format('woff'),url('fonts/fontawesome-webfont.ttf?v=4.0.3') format('truetype'),url('fonts/fontawesome-webfont.svg?v=4.0.3#fontawesomeregular') format('svg');
    font-weight: normal;
    font-style: normal;
}