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哈希值，whils你的标准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'; 

我们也呼吁我们的应用程序.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. 您应该看到Web浏览器错误

覆盖字体家族

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理解。

什么路径把资产的URL

要知道哪条路asset-url了解到，进入轨道的控制台，然后输入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上找到的部分路径。

检查你写的正确的道路

On Rails的控制台上的发展：

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

应返回：

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

注后/assets/和摘要的最后部分。

Answer 3

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

2： - 在rake资源：预编译RAILS_ENV = production之后，您的所有字体将被预编译到带有摘要的public/assets文件夹。 3： - 在scss文件中使用src：font_url（'fontname.eot'），而不是使用src：url（'fontname.eot'）而不是src：font_url（'fontname.eot'）。