Question

这是我加载CSS字体的CSS块：

@font-face {
    font-family: 'HelveticaNeueRegular';
    src: url('../fonts/helveticaneue/helveticaneue-roman.eot');
    src: url('../fonts/helveticaneue/helveticaneue-roman.eot?#iefix') format('embedded-opentype'),
         url('../fonts/helveticaneue/helveticaneue-roman.woff') format('woff'),
         url('../fonts/helveticaneue/helveticaneue-roman.ttf') format('truetype'),
         url('../fonts/helveticaneue/helveticaneue-roman.svg#helvetica_neueregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

字体位于/app/assets/fonts目录。

在本地主机上，当我加载页面时，没有加载字体，但是在Heroku上正确加载了所有字体。

有什么问题？

Answer 1

您看到这一点的原因是，在生产环境中，所有资产都会被编译并放入单个文件夹/assets/asset-name。据说，css和type面都在同一个文件夹中，可以通过相对路径访问。在开发环境中，资产不会被编译，可以在/assets/asset-type/asset-name访问，这意味着CSS和类型面不在同一个文件夹中。

为了克服这个障碍，Rails有一个叫做asset-url的神奇助手。

所以对你的例子来说：

@font-face {
font-family: 'HelveticaNeueRegular';
src: asset-url('helveticaneue-roman.eot');
src: asset-url('helveticaneue-roman.eot?#iefix') format('embedded-opentype'),
     asset-url('helveticaneue/helveticaneue-roman.woff') format('woff'),
     asset-url('helveticaneue/helveticaneue-roman.ttf') format('truetype'),
     asset-url('helveticaneue/helveticaneue-roman.svg#helvetica_neueregular')     format('svg');
font-weight: normal;
font-style: normal;
}

另外，由于您在资产下添加了字体文件夹，因此您需要将其添加到资产路径中：config.assets.paths << "#{Rails.root}/app/assets/fonts"

中的config/application.rb

Answer 2

这与资产管道的运作方式有关：

在开发环境中，所有资产均由/app/assets/...动态提供服务。
在生产环境中，资产被编译并移动到/public/assets/，从那里Web服务器可以拾取现在的静态文件。

我怀疑fonts.css（意外地？）中的路径指向生产环境中的文件。

要解决您的情况，您基本上有两种选择：

将字体文件移到/public目录（例如/public/fonts）并从那里引用文件：

@font-face {
  font-family: 'HelveticaNeueRegular';
  src: url('/fonts/helveticaneue/helveticaneue-roman.eot');
  src: url('/fonts/helveticaneue/helveticaneue-roman.eot?#iefix') format('embedded-opentype'),
       url('/fonts/helveticaneue/helveticaneue-roman.woff') format('woff'),
       url('/fonts/helveticaneue/helveticaneue-roman.ttf') format('truetype'),
       url('/fonts/helveticaneue/helveticaneue-roman.svg#helvetica_neueregular') format('svg');
  font-weight: normal;
  font-style: normal;
}

使用Rails的资产助手。可以找到一个很好的介绍here。

Answer 3

我终于找到了这个问题 - 进入config/application.rb添加以下内容：

config.assets.paths << Rails.root.join("app", "assets", "fonts")
config.assets.precompile += %w( .svg .eot .woff .ttf )

Rails - 字体路径适用于生产，但不适用于localhost

3 个答案: