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'）。