自定义字体在Rails Asset Pipeline中不起作用 [英] Custom Font not working in Rails Asset Pipeline

问题描述

我的Rails应用程序中具有以下文件结构:

I have this file structure in my Rails app:

\APP
+---assets
|   +---fonts
|   |       icons.eot
|   |       icons.svg
|   |       icons.ttf
|   |       icons.woff
|   +---icons
|   +---images
|   +---javascripts
|   +---stylesheets
+---controllers
|
... etc ...

我拥有的自定义字体(图标)在开发中起作用，而在生产(或暂存)中不起作用.我知道这与资产管道有关(404错误).如何显示图标/字体?

The custom font I have (icons) works in development, but not in production (or staging). I know it has something to do with the asset pipeline (404 errors). How do I get my icons / font to show up?

我的_icons.scss文件(包含在application.css.scss中):

My _icons.scss file (included in application.css.scss):

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

@media screen and (-webkit-min-device-pixel-ratio: 0) {
  @font-face {
    font-family: "icons";
    src: font-url("icons.svg#icons") format("svg");
  }
}

[data-icon]:before {
  content: attr(data-icon);
}

[data-icon]:before,
.icon-ico-addcart:before,
.icon-ico-addcart-hover:before,
.icon-ico-allparsers-menu:before,
.icon-ico-blog-menu:before,
.icon-ico-cart:before,
...

我得到的错误:

GET http://127.0.0.1:8888/assets/icons.woff 
GET http://127.0.0.1:8888/assets/icons.ttf 404 (Not Found)      application-e60c1d16b23dd8ae118e0bb3a1d3311c.js:6129 

我之前已经进行过预编译.我的生产环境是我自己的服务器.字体是使用fontcustom和svgs生成的.我使用了这篇文章.

I am precompiling before. My production environment is my own server. The font was generated using fontcustom with svgs. I used this article to do so.

字体正在预编译...如果我在页面上编辑application.css文件，请更改

The font is being precompiled... If I edit the application.css file on the page, changing

url('/assets/icons.woff')

到

url('/assets/icons-8695a8c5b193c6423e0b3b7a9c71b808.woff')

出现我的图像.这意味着我的资产正在预编译，但是我无法在我的scss文件中正确引用它们.

my images appear. This means that my assets are precompiling, but I'm not able to reference them correctly in my scss file.

推荐答案

您在生产中使用什么? Heroku?

What are you using for production? Heroku?

尝试预编译这些类型的文件:

Try precompiling those types of files:

 # In config/initializers/assets.rb
 Rails.application.config.assets.precompile += %w( .ttf ) 

包括所有字体结尾.您也可以尝试使用CDN代替字体.

Include all the font endings. You could also try including the font by CDN instead.

如果这不起作用，请查看以下答案: Rails 4 :为什么无法在生产中加载字体?

If that doesn't work, maybe check out this answer: Rails 4: Why are fonts not loading in production?

这篇关于自定义字体在Rails Asset Pipeline中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！