20

我无法在生产中的 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;
}

在我的 production.rb 中,我有:

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

5 回答 5

24

上周我们遇到了这个问题 - 问题是您的资产将被编译为具有 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 -> application.css.scss 来支持 @import 函数

于 2013-10-16T17:20:37.950 回答
12

这是针对任何库解决此问题的通用方法。

在本地重现错误

  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/和摘要。

于 2016-11-30T21:08:40.543 回答
1

适用于 Rails >= 5 && 链轮 >= 4:

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

仅在开发中有效,因为在开发中 railsapp/assets直接为所有文件夹提供服务而无需预编译(但在生产中,这就是 rails 找不到字体的原因),因此您可以app/assets仅使用 url 访问文件夹内的内容url

在生产中,您需要这些文件的预编译版本。Rails 将这些文件预编译为public/assets. 要访问这些文件,您需要使用 sprockets helpers:font-url或更通用的 helper asset-url

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

另外,下面的所有文件夹app/assets都会被自动预编译,您不需要将fonts文件夹添加到 sprockets 搜索路径中。

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

于 2020-08-13T18:55:51.657 回答
0

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

2:- 在 rake asset:precompile RAILS_ENV=production 之后,你所有的字体都将被预编译到 public/assets 文件夹中并带有摘要。

3:- 不要使用 src: url('fontname.eot') 在 scss 文件中使用 src: font_url('fontname.eot') 。

于 2018-01-09T09:51:55.750 回答
0

Rails 附带了一个预构建助手。您需要使用asset-url() 而不是使用url()。

于 2019-12-11T07:42:39.000 回答