Rails Nginx 乘客不提供字体图标文件答案

【问题标题】：Rails Nginx Passenger not serving font icon filesRails Nginx 乘客不提供字体图标文件
【发布时间】：2018-04-29 20:56:06
【问题描述】：

我正在生产模式下运行 Rails 5.1.4 应用程序。我使用 Semantic UI 作为我的 css 框架，并且已经运行 RAILS_ENV=production rails assets:precompile 来编译 public/assets 文件夹中的资产和字体文件。当我加载我的网站时，除了图标被正方形替换之外，一切正常。

这是我的配置/application.rb：

class Application < Rails::Application
  config.load_defaults 5.1

  config.assets.paths << Rails.root.join('semantic', 'dist')
  config.assets.precompile << 'themes/default/assets/fonts/*'
end

我的 Nginx 文件：

server {
    listen       80;
    server_name  atrium.michaelvasallo.com;
    passenger_enabled on;
    rails_env production;
    root /var/www/atrium/public;
}

如您所见，语义 UI 正在查看 themes/default/assets/fonts/，这就是我的图标文件所在的位置。当我预编译时，它们都显示在 public/assets 文件夹中，但在加载页面时它们没有被提供。

【问题讨论】：

检查您的浏览器控制台，字体可能被阻止，因为浏览器需要额外的字体文件的 cors 标头。

标签： ruby-on-rails ruby nginx passenger semantic-ui

【解决方案1】：

不是修复，但我找到了更好的解决方案。在我的semantic/src/site/globals/site.variables 中，我将字体路径设置为语义 UI CDN，而不是从本地文件中获取。

@fontPath: 'https://cdn.jsdelivr.net/npm/semantic-ui@2.2.13/dist/themes/default/assets/fonts';

【讨论】：

【解决方案2】：

我在生产中遇到了同样的问题，请查看this answer 以了解我是如何工作的。

在您的情况下，您可能需要添加：

Rails.application.config.assets.paths << Rails.root.join('semantic', 'dist', 'themes', 'default')

在config/initializers/assets.rb

将@fontPath 设置为：

@fontPath  : "assets/fonts";

并在icon.variables 中使用font-url 助手

/*******************************
             Icon
*******************************/

/*--------------
   Font Files
---------------*/
@fontName: 'icons';
@src:
  font-url("@{fontPath}/@{fontName}.eot?#iefix") format('embedded-opentype'),
  font-url("@{fontPath}/@{fontName}.woff2") format('woff2'),
  font-url("@{fontPath}/@{fontName}.woff") format('woff'),
  font-url("@{fontPath}/@{fontName}.ttf") format('truetype'),
  font-url("@{fontPath}/@{fontName}.svg#icons") format('svg')
;
@fallbackSRC: font-url("@{fontPath}/@{fontName}.eot");

/*--------------
 Optional Files
---------------*/

/* Outline Icons */
@importOutlineIcons: true;
@outlineFontName: 'outline-icons';
@outlineSrc:
  font-url("@{fontPath}/@{outlineFontName}.eot?#iefix") format('embedded-opentype'),
  font-url("@{fontPath}/@{outlineFontName}.woff2") format('woff2'),
  font-url("@{fontPath}/@{outlineFontName}.woff") format('woff'),
  font-url("@{fontPath}/@{outlineFontName}.ttf") format('truetype'),
  font-url("@{fontPath}/@{outlineFontName}.svg#icons") format('svg')
;
@outlineFallbackSRC: font-url("@{fontPath}/@{outlineFontName}.eot");

/* Brand Icons */
@importBrandIcons: true;
@brandFontName: 'brand-icons';
@brandSrc:
  font-url("@{fontPath}/@{brandFontName}.eot?#iefix") format('embedded-opentype'),
  font-url("@{fontPath}/@{brandFontName}.woff2") format('woff2'),
  font-url("@{fontPath}/@{brandFontName}.woff") format('woff'),
  font-url("@{fontPath}/@{brandFontName}.ttf") format('truetype'),
  font-url("@{fontPath}/@{brandFontName}.svg#icons") format('svg')
;
@brandFallbackSRC: font-url("@{fontPath}/@{brandFontName}.eot");

【讨论】：