Css 自定义字体赢得'；t在Firefox中呈现Rails 4应用程序

我上传了一个名为Kodin的自定义字体，所有这些都可以在IE、Chrome和Safari中使用，但不能在Firefox中使用

我已将所有自定义字体上载到app/assets/fonts

包括的文件是

Kodin-Regular.otf
Kodin-Regular.eot
Kodin-Regular.woff
Kodin-Regular.ttf

我的application.css文件包括

   @font-face {
        font-family: "KODIN";
        src: url('/assets/Kodin-Regular.otf') format("truetype");
        src: url('/assets/Kodin-Regular.eot') format('embedded-opentype'),  
          url('/assets/Kodin-Regular.woff') format('woff'),  
          url('/assets/Kodin-Regular.ttf') format('truetype');  
        font-weight: normal;  
        font-style: normal;  
    }

一切都很好。但在Firefox中，该字体不会在网站的任何地方呈现。我已经看到一些关于如何解决这个问题的堆栈溢出线程，但是没有一个具有Rails特定建议

谢谢

更新

在Firefox中发现一些控制台错误。路径不正确吗

downloadable font: download failed (font-family: "KODIN" style:normal weight:normal stretch:normal src index:0): status=2147746065 source: http://localhost:3000/assets/Kodin-Regular.otf application.css:25:12
downloadable font: download failed (font-family: "KODIN" style:normal weight:normal stretch:normal src index:2): status=2147746065 source: http://localhost:3000/assets/Kodin-Regular.woff application.css:25:12
downloadable font: download failed (font-family: "KODIN" style:normal weight:normal stretch:normal src index:3): status=2147746065 source: http://localhost:3000/assets/Kodin-Regular.ttf application.css

---

尝试使用如图所示的资产路径，希望它能工作

src:url(asset-path('Kodin-Regular.otf')) format('truetype');

---

经过数周的讨论，我终于找到了解决办法

我的CSS是多余的，但我认为Firefox需要它自己的@font-face来处理你调用的每个资产

   @font-face {
    font-family: "KODIN";
    src: url('/assets/KODIN-Regular.otf') format("truetype"),
      url('/assets/KODIN-Bold.otf') format("truetype"),
      url('/assets/KODIN-Light.otf') format("truetype"),
      url('/assets/KODIN-Medium.otf') format("truetype"),
      url('/assets/KODIN-Regular.eot') format('embedded-opentype'),
      url('/assets/KODIN-Regular.woff2') format('woff2'), /* Super Modern Browsers */
      url('/assets/KODIN-Regular.woff') format('woff'),  
      url('/assets/KODIN-Regular.ttf') format('truetype');  
    font-weight: normal;  
    font-style: normal;  
}

@font-face {
    font-family: "KODIN-bold";
    src:
      url('/assets/KODIN-Bold.otf') format("truetype");
    font-weight: normal;  
    font-style: normal;  
}

@font-face {
    font-family: "KODIN-light";
    src:
      url('/assets/KODIN-light.otf') format("truetype");
    font-weight: normal;  
    font-style: normal;  
}

@font-face {
    font-family: "Kodin-light";
    src:
      url('/assets/KODIN-light.otf') format("truetype");
    font-weight: normal;  
    font-style: normal;  
}

@font-face {
    font-family: "KODIN-medium";
    src:
      url('/assets/KODIN-medium.otf') format("truetype");
    font-weight: normal;  
    font-style: normal;  
}

---

在CSS中调用这些字体时，调用字体区分大小写。。。在Safari、IE或Chrome中，区分大小写似乎不是问题，但由于某些原因，firefox存在问题。

可能会删除第一个src:并将url（otf）添加到第二个src。我想那里有些东西被推翻了！刚刚尝试了一下@DomlThe Bread-在Chrome和Safari中一切都正常，但在Firefox中仍然无法呈现。我将在上面进行编辑，因为我在firefox控制台中看到一个错误。您的css文件位于哪里？字体？@DomlThe Bread-css分散在各种css文件中。上面显示的字体面CSS位于application.CSS.scss文件中-字体位于app/assets/fontssis下。如果是scss，您可以仔细查看style.CSS的构建路径所在的位置，并尝试将/assets/path调整为style.CSS文件中的路径，而不是scss文件中的路径。也许您可以尝试不使用前面的/url（'assets/Kodin Regular），但在其他浏览器中呈现字体确实很有趣。.woff文件应该在FFS中工作，只是尝试了一下。在Firefox中仍不呈现，但这仍然适用于Chrome和Safari：(