Rails 4：为什么字体没有加载到生产中？

Question

我无法在生产中的Rails 4应用程序中加载字体，它在开发中正常工作。

资产在部署时在服务器上预编译。

我的字体在

中

app/assets/fonts

我的app.css：

@font-face {
    font-family: 'WalkwayBoldRegular';
    src: url('Walkway_Bold-webfont.eot');
    src: url('Walkway_Bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('Walkway_Bold-webfont.woff') format('woff'),
         url('Walkway_Bold-webfont.ttf') format('truetype'),
         url('Walkway_Bold-webfont.svg#WalkwayBoldRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}

在我的produ.rb中我有：

config.assets.precompile << Proc.new { |path|
  if path =~ /\.(eot|svg|ttf|woff)\z/
    true
  end
}

Answer 1

我们上周遇到了这个问题 - 问题是您的资产将被编译为具有MD5哈希值，而您的标准CSS仍将寻找其“标准”名称。这是图像和图像的问题。字体。

@font-face {
    font-family: 'akagi';
    src: asset_url('fonts/akagi-th-webfont.eot');
    src: asset_url('fonts/akagi-th-webfont.eot?#iefix') format('embedded-opentype'),
         asset_url('fonts/akagi-th-webfont.woff') format('woff'),
         asset_url('fonts/akagi-th-webfont.ttf') format('truetype'),
         asset_url('fonts/akagi-th-webfont.svg#akagithin') format('svg');
    font-weight: 300;
    font-style: normal;
}

这是一个如何使用scss文件动态加载资源的示例。这些文件（在推送之前或在初始化期间）被编译到.css文件中，所有这些文件的资产都已正确同步。

我们与Heroku有类似的问题，并通过将我们的文件放入/stylesheets/layout/fonts.css.scss然后调用

来设法使其工作

@import '/layout/fonts';

我们还调用了application.css - ＆gt; application.css.scss支持@import函数

Answer 2

以下是如何解决任何库的此问题的一般方法。

本地

重现错误

1. 在生产中运行rails服务器

   1. 在终端rake assets:precompile
   上

   2. 这是config/environments/production.rb

        # Rails 4 production
        # config.serve_static_files = true
        # Rails 5, Uncomment to run production on local
        # config.log_level = :debug
        config.public_file_server.enabled = true
      

   3. 在终端RAILS_ENV=production rails s
   上
2. 您应该会在网络浏览器上看到错误

覆盖字体系列

1. application.css需要重命名为application.scss，因为asset-url将被使用

2. 在文件config/initializers/assets.rb上预编译添加字体：

   Rails.application.config.assets.precompile << /\.(?:svg|eot|woff|ttf)$/
   

3. 在CSS库中查找字体定义并将其复制到application.scss。它应该是这样的：

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

4. 更改为：

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

做了哪些更改

1. 使用asset-url代替url
2. 将../fonts或类似内容更改为asset-url理解的路径。

在assets-url

上放置什么路径

要了解asset-url了解哪条路径，请转到rails控制台并输入Rails.application.assets.paths。你会得到类似的东西：

[
  '/path/1',
  '/path/2',
  '/path/3',
]

如果您的字体在/path/2/my-library/fonts/上，请使用 asset-url('my-library/fonts/my-library.eot')。

即。您删除了在Rails.application.assets.paths上找到的部分的路径。

检查您是否写了正确的路径

开发时的Rails控制台：

helper.asset_url('my-library/fonts/my-library.eot')

应该返回：

"/assets/my-library/fonts/my-library-2517b97e2c0e1e6c8ceb9dd007015f897926bc504154137281eec4c1a9f9bdc9.eot"

请注意尾随/assets/和最后一部分的摘要。

Answer 3

使用Rails> = 5 &&链轮> = 4：

src: url('Walkway_Bold-webfont.eot');

仅在开发中有效，因为在开发中，rails无需预编译即可直接提供所有app/assets文件夹（但在生产环境中不行，这就是为什么rails找不到字体的原因），因此您可以仅使用URL app/assets访问url文件夹中的内容。

在生产中，您需要这些文件的预编译版本。 Rails将这些文件预编译为public/assets。要访问这些文件，您需要 使用链轮辅助程序：font-url或更通用的辅助程序asset-url。

src: font-url('Walkway_Bold-webfont.eot');

此外，app/assets下的所有文件夹将自动进行预编译，您无需在链轮搜索路径中添加fonts文件夹。

您可以在Rails控制台中使用Rails.application.config.assets.paths检查搜索路径。

Answer 4

1： - 将所有字体保存在app / assets / fonts文件夹中。

2： - rake资产：预编译RAILS_ENV =生产后，所有字体都会被预编译到带有摘要的public / assets文件夹。

3： - 而不是使用src：url（'fontname.eot'）在scss文件中使用src：font_url（'fontname.eot'）。

Answer 5

为此，Rails附带了一个预构建助手。您需要使用asset-url（）而不是url（）。