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

Question

经过多次审核后，我无法正确显示通过fontsquirrel创建的自定义字体。 Chrome的Inspector显示图标已就位，但我得到的只是此默认图标框; o（ Rails 4 app，Bootstrap

有什么想法吗？

application.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中的链接引用。确保没有移动文件，并且样式表与fonts文件夹位于同一目录中。此外，％＆gt;在你的font-face看起来不合适...我不知道这是否是一个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;
}