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;
}

在我的production.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 - > 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理解的路径。

放置在资产网址上的路径

要知道哪个路径可以asset-url理解，请转到rails console并输入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/最后一部分的结尾和摘要。