自定义字体不会在 Firefox for Rails 4 应用程序中呈现答案

【问题标题】：Custom fonts won't render in Firefox for Rails 4 Application自定义字体不会在 Firefox for Rails 4 应用程序中呈现
【发布时间】：2015-03-11 16:51:02
【问题描述】：

我上传了一个名为 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(otf) 添加到第二个 src。我想那里有些东西被覆盖了！
刚刚试了一下@DomlThe-Bread - 在 Chrome 和 Safari 中一切正常，但在 Firefox 中仍然无法呈现。将在上面进行编辑，因为我在 Firefox 控制台中看到一个错误。
你的css文件在哪里？和字体？
@DomlThe-Bread - css 分散在各种 css 文件中。上面显示的 font-face 的 CSS 在 application.css.scss 文件中 - 字体在 app/assets/fonts 下
因为它是 scss，您可能会仔细查看 style.css 的构建路径所在的位置，并尝试将 /assets/ 路径调整为 from 您的路径style.css 文件，而不是来自 scss 文件。也许您可以尝试不使用前面的 / url('assets/Kodin-Regular)，但字体在其他浏览器中呈现真的很有趣。 .woff 文件应该在 FF 中工作

标签： css ruby-on-rails firefox ruby-on-rails-4 custom-font

【解决方案1】：

尝试使用如图所示的资产路径，希望它有效。

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

【讨论】：

刚刚试了一下。无法在 Firefox 中渲染，但这仍然适用于 Chrome 和 Safari :(

【解决方案2】：

经过数周的搁置后，我终于找到了解决方案。

我的 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 的问题。

【讨论】：