我使用Rails 4.2，并不能得到footable图标显示。显示的是小方框，而不是我所期望的折叠行上的(+)和小排序箭头。在学习了这里的信息之后，我对代码做了一个简单的更改:删除css中的字体目录。也就是说，像这样更改所有的css条目:

src:url('fonts/footable.eot');

看起来像这样:

src:url('footable.eot');

它工作。我认为Rails 4.2已经假定了字体目录，所以在css代码中再次指定它会使字体文件找不到。希望这能有所帮助。

这里是一个repo演示了在Heroku上使用Rails 5.2提供自定义字体。它进一步优化服务字体，根据https://www.webpagetest.org/尽可能快

https://github.com/nzoschke/edgecors

首先，我从上面的答案中挑选了一些。对于Rails 5.2+，您不需要额外的资产管道配置。

资产管道和SCSS

将字体放置在app/assets/fonts中 将@font-face声明放在一个scss文件中，并使用font-url帮助器

从app /资产/样式表/ welcome.scss:

@font-face {
  font-family: 'Inconsolata';
  src: font-url('Inconsolata-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

body {
  font-family: "Inconsolata";
  font-weight: bold;
}

从CDN与CORS服务

我正在使用CloudFront，添加了Heroku Edge插件。

首先在生产端配置CDN前缀和默认的Cache-Control头。rb:

Rails.application.configure do
  # e.g. https://d1unsc88mkka3m.cloudfront.net
  config.action_controller.asset_host = ENV["EDGE_URL"]

  config.public_file_server.headers = {
    'Cache-Control' => 'public, max-age=31536000'
  }
end

如果您尝试从herokuapp.com URL访问CDN URL的字体，您将在浏览器中得到一个CORS错误:

从“https://edgecors.herokuapp.com”访问“https://d1unsc88mkka3m.cloudfront.net/assets/Inconsolata-Regular.ttf”的字体已被CORS政策阻止: 被请求的资源上没有'Access-Control-Allow-Origin'标头。edgecors.herokuapp.com/ GET https://d1unsc88mkka3m.cloudfront.net/assets/Inconsolata-Regular.ttf net::ERR_FAILED

因此，配置CORS以允许从Heroku到CDN URL访问字体:

module EdgeCors
  class Application < Rails::Application
    # Initialize configuration defaults for originally generated Rails version.
    config.load_defaults 5.2

    config.middleware.insert_after ActionDispatch::Static, Rack::Deflater

    config.middleware.insert_before 0, Rack::Cors do
      allow do
        origins %w[
          http://edgecors.herokuapp.com
          https://edgecors.herokuapp.com
        ]
        resource "*", headers: :any, methods: [:get, :post, :options]
      end
    end
  end
end

服务gzip字体资产

资产管道构建一个.ttf.gz文件，但不为它服务。这个monkey补丁将资产管道gzip白名单更改为黑名单:

require 'action_dispatch/middleware/static'

ActionDispatch::FileHandler.class_eval do
  private

    def gzip_file_path(path)
      return false if ['image/png', 'image/jpeg', 'image/gif'].include? content_type(path)
      gzip_path = "#{path}.gz"
      if File.exist?(File.join(@root, ::Rack::Utils.unescape_path(gzip_path)))
        gzip_path
      else
        false
      end
    end
end

最终的结果是app/assets/fonts中的自定义字体文件，这些文件由CloudFront长期缓存提供。

把你的字体文件(woff, woff2, eot, ttf，…)放在/app/assets/fonts目录下。

然后添加以下到您的配置/初始化/资产。rb:

Rails.application.config.assets.paths << Rails.root.join('app', 'assets', 'fonts')
Rails.application.config.assets.precompile << /\.(?:svg|eot|woff|woff2|ttf)\z/

在上面的答案中，woff2没有包括在内(为了将来的参考，你可能需要添加其他扩展，只需在这里添加|{font-file-extension})

使用css文件中的字体:

重要的是，你需要将它从stylesheet.css重命名为stylesheet.css.scss(这是为了让font-url在资产预编译后正确地在生产中转换字体的url):

@font-face {
  font-family: 'MyFont'
  src: font-url('myfont.woff') format('woff');
}

body{
  font-family: 'MyFont'
}

然后运行:

rails assets:precompile

在运行资产预编译后，你的字体文件从app/assets/fonts/myfont复制。woff到public/assets/myfont-{SOME_DIGEST_KEY}。woff的位置。现在上面的css在生产中也很像图像资产。

您还可以看到，在预编译资产命令之后创建了一个应用程序-{somedigest}.css，在其中您将看到 现在，我们的font-url('myfont.woff')将被转换为url(/assets/myfont.woff-{SOME_DIGEST_KEY}.woff)，并且摘要与文件移动到的位置匹配。通过这种方式，更新你的字体文件也可以适当地破坏浏览器缓存等。

确保你的nginx也服务于public/assets文件夹以获得更好的性能。这是用rails 5和rails 6在生产中测试的。它也应该工作与rails 4最有可能。

我最近将Rails 3应用程序升级到Rails 4时也遇到了类似的问题。我的字体在Rails 4+中不能正常工作，我们只允许将字体保存在app/assets/fonts目录下。但是我的Rails 3应用程序有一个不同的字体组织。所以我必须配置应用程序，使它仍然与Rails 4+有我的字体在不同的地方，而不是app/assets/fonts。我已经尝试了几个解决方案，但在我发现非愚蠢的消化资产宝石后，它只是让它变得如此简单。

通过在Gemfile中添加以下代码行来添加这个gem:

gem 'non-stupid-digest-assets'

然后运行:

bundle install

最后在config/initializers/non_digest_assets中添加以下一行。rb文件:

NonStupidDigestAssets.whitelist = [ /\.(?:svg|eot|woff|ttf)$/ ]

就是这样。这很好地解决了我的问题。希望这对遇到类似问题的人有所帮助。

如果你不想跟踪字体的移动:

# Adding Webfonts to the Asset Pipeline
config.assets.precompile << Proc.new { |path|
  if path =~ /\.(eot|svg|ttf|woff)\z/
    true
  end
}

如果你有一个叫做scaffold。css的文件。Scss，那么就有可能覆盖您在其他文件中所做的所有自定义操作。我把那个文件注释掉了，突然之间一切都正常了。如果那个文件里没有什么重要的东西，你还不如把它删掉!