我在Scss文件中配置了一些字体，如下所示：
@font-face {
font-family: 'Icomoon';
src: asset-url('icoMoon.eot?#iefix', font) format('embedded-opentype'),
asset-url('icoMoon.woff', font) format('woff'),
asset-url('icoMoon.ttf', font) format('truetype'),
asset-url('icoMoon.svg#Icomoon', font) format('svg');
}
实际的字体文件存储在/ app / assets / fonts /
中我已将config.assets.paths << Rails.root.join("app", "assets", "fonts")添加到我的application.rb文件
，编译CSS源代码如下：
@font-face {
font-family: 'Icomoon';
src: url(/assets/icoMoon.eot?#iefix) format("embedded-opentype"), url(/assets/icoMoon.woff) format("woff"), url(/assets/icoMoon.ttf) format("truetype"), url(/assets/icoMoon.svg#Icomoon) format("svg");
}
但是当我运行应用程序时，找不到字体文件。日志：
在2012-06-05 23:21:17 +0100开始获取127.0.0.1的“/assets/icoMoon.ttf” 服务资产/icoMoon.ttf - 404 Not Found（13ms）
为什么资产管道不会将字体文件缩小为/ assets？
任何人的想法？
亲切的问候， 尼尔
额外信息：
在检查资源路径和assetprecompile的rails控制台时，我得到以下信息：
1.9.2p320 :001 > y Rails.application.config.assets.precompile
---
- !ruby/object:Proc {}
- !ruby/regexp /(?:\/|\\|\A)application\.(css|js)$/
- .svg
- .eot
- .woff
- .ttf
=> nil
1.9.2p320 :002 > y Rails.application.config.assets.paths
---
- /Users/neiltonge/code/neiltonge/app/assets/fonts
- /Users/neiltonge/code/neiltonge/app/assets/images
- /Users/neiltonge/code/neiltonge/app/assets/javascripts
- /Users/neiltonge/code/neiltonge/app/assets/stylesheets
- /Users/neiltonge/code/neiltonge/vendor/assets/images
- /Users/neiltonge/code/neiltonge/vendor/assets/javascripts
- /Users/neiltonge/code/neiltonge/vendor/assets/stylesheets
- /Users/neiltonge/.rvm/gems/ruby-1.9.2-p320@neiltonge/gems/jquery-rails-2.0.0/vendor/assets/javascripts
- /Users/neiltonge/.rvm/gems/ruby-1.9.2-p320@neiltonge/gems/coffee-rails-3.2.1/lib/assets/javascripts
- /Users/neiltonge/.rvm/gems/ruby-1.9.2-p320@neiltonge/gems/bourbon-1.3.0/app/assets/stylesheets
- !ruby/object:Pathname
path: /Users/neiltonge/code/neiltonge/app/assets/fonts
=> nil
答案 0 :(得分：636)
如果您的Rails版本介于> 3.1.0和< 4之间，请将字体放在以下任意文件夹中：
app/assets/fonts lib/assets/fonts vendor/assets/fonts
对于Rails版本> 4，您必须将字体放在app/assets/fonts文件夹中。
注意：要将字体放在这些指定文件夹之外，请使用以下配置：
config.assets.precompile << /\.(?:svg|eot|woff|ttf)\z/
对于Rails版本> 4.2，建议将此配置添加到config/initializers/assets.rb。
但是，您也可以将其添加到config/application.rb或config/production.rb
在CSS文件中声明您的字体：
@font-face {
font-family: 'Icomoon';
src:url('icomoon.eot');
src:url('icomoon.eot?#iefix') format('embedded-opentype'),
url('icomoon.svg#icomoon') format('svg'),
url('icomoon.woff') format('woff'),
url('icomoon.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
确保您的字体的名称与声明的URL部分中的字体完全相同。大写字母和标点符号很重要。在这种情况下，字体应具有名称icomoon。
如果您使用Sass或Less with Rails > 3.1.0（您的CSS文件具有.scss或.less扩展名），请更改字体中的url(...)声明到font-url(...)。
否则，您的CSS文件应具有扩展名.css.erb，字体声明应为url('<%= asset_path(...) %>')。
如果您使用的是Rails > 3.2.1，则可以使用font_path(...)代替asset_path(...)。这个助手完全一样，但更清楚。
最后，在CSS中使用您的字体，就像在font-family部分中声明的那样。如果它被声明为大写，你可以像这样使用它：
font-family: 'Icomoon';
答案 1 :(得分：38)
现在，这是一个转折：
您应该将所有字体放在
app/assets/fonts/中，因为将默认情况下会在暂存和生产中进行预编译 - 当推送到 heroku 时，它们会被预编译。< / p>
vendor/assets中放置的字体文件 NOT 默认情况下会在暂存或生产时进行预编译 - 它们将在 heroku 上失败。 Source!
- @plapier, thoughtbot/bourbon
我坚信将供应商字体放入
vendor/assets/fonts比将它们放入app/assets/fonts更有意义。同 这2条额外的配置这对我来说很有用（上 Rails 4）：
app.config.assets.paths << Rails.root.join('vendor', 'assets', 'fonts')
app.config.assets.precompile << /\.(?:svg|eot|woff|ttf)$/
- @jhilden, thoughtbot/bourbon
我还在rails 4.0.0上对其进行了测试。实际上，最后一行足以安全地从vendor文件夹中预编译字体。花了几个小时来搞清楚。希望它有所帮助。
答案 2 :(得分：23)
如果您不想跟踪移动字体：
# Adding Webfonts to the Asset Pipeline
config.assets.precompile << Proc.new { |path|
if path =~ /\.(eot|svg|ttf|woff)\z/
true
end
}
答案 3 :(得分：18)
您需要在@ font-face块中使用font-url，而不是url
@font-face {
font-family: 'Inconsolata';
src:font-url('Inconsolata-Regular.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
以及application.rb中的这一行，正如您所提到的（对于app/assets/fonts中的字体
config.assets.paths << Rails.root.join("app", "assets", "fonts")
答案 4 :(得分：9)
这是我在资产管道中使用字体的方法：
1）将所有字体文件放在app/assets/fonts/下，实际上您不限于将其放在fonts文件夹名称下。您可以放置任何您喜欢的子文件夹名称。例如。 app/assets/abc或app/assets/anotherfonts。但我强烈建议您将其放在app/assets/fonts/下以获得更好的文件夹结构。
2）从您的sass文件中，使用sass帮助器font-path来请求您的字体资源
@font-face {
font-family: 'FontAwesome';
src: url(font-path('fontawesome-webfont.eot') + '?v=4.4.0');
src: url(font-path('fontawesome-webfont.eot') + '?#iefix&v=4.4.0') format('embedded-opentype'),
url(font-path('fontawesome-webfont.woff2') + '?v=4.4.0') format('woff2'),
url(font-path('fontawesome-webfont.woff') + '?v=4.4.0') format('woff'),
url(font-path('fontawesome-webfont.ttf') + '?v=4.4.0') format('truetype'),
url(font-path('fontawesome-webfont.svg') + '?v=4.4.0#fontawesomeregular') format('svg');
font-weight: normal;
font-style: normal;
}
3）从本地计算机运行bundle exec rake assets:precompile并查看application.css结果。你应该看到这样的东西：
@font-face {
font-family: 'FontAwesome';
src: url("/assets/fontawesome-webfont-d4f5a99224154f2a808e42a441ddc9248ffe78b7a4083684ce159270b30b912a.eot" "?v=4.4.0");
src: url("/assets/fontawesome-webfont-d4f5a99224154f2a808e42a441ddc9248ffe78b7a4083684ce159270b30b912a.eot" "?#iefix&v=4.4.0") format("embedded-opentype"), url("/assets/fontawesome-webfont-3c4a1bb7ce3234407184f0d80cc4dec075e4ad616b44dcc5778e1cfb1bc24019.woff2" "?v=4.4.0") format("woff2"), url("/assets/fontawesome-webfont-a7c7e4930090e038a280fd61d88f0dc03dad4aeaedbd8c9be3dd9aa4c3b6f8d1.woff" "?v=4.4.0") format("woff"), url("/assets/fontawesome-webfont-1b7f3de49d68b01f415574ebb82e6110a1d09cda2071ad8451bdb5124131a292.ttf" "?v=4.4.0") format("truetype"), url("/assets/fontawesome-webfont-7414288c272f6cc10304aa18e89bf24fb30f40afd644623f425c2c3d71fbe06a.svg" "?v=4.4.0#fontawesomeregular") format("svg");
font-weight: normal;
font-style: normal;
}
如果您想了解资产管道的更多工作方式，可以访问以下简单指南： https://designcode.commandrun.com/rails-asset-pipeline-simple-guide-830e2e666f6c#.6lejlayk2
答案 5 :(得分：5)
我正在使用Rails 4.2，并且无法显示足够的图标。显示了小盒子，而不是折叠行上的（+）和我预期的小排序箭头。在研究了这里的信息之后，我对我的代码做了一个简单的更改：删除css中的字体目录。也就是说，更改所有的css条目，如下所示：
src:url('fonts/footable.eot');
看起来像这样：
src:url('footable.eot');
有效。我认为Rails 4.2已经假定了字体目录，因此在css代码中再次指定它会使得找不到字体文件。希望这可以帮助。
答案 6 :(得分：5)
我在Rails 4.2上遇到了这个问题（使用ruby 2.2.3）并且必须编辑font-awesome _paths.scss partial以删除对$fa-font-path的引用并删除前导斜杠。以下内容被打破了：
@font-face {
font-family: 'FontAwesome';
src: font-url('#{$fa-font-path}/fontawesome-webfont.eot?v=#{$fa-version}');
src: font-url('#{$fa-font-path}/fontawesome-webfont.eot?#iefix&v=#{$fa-version}') format('embedded-opentype'),
font-url('#{$fa-font-path}/fontawesome-webfont.woff2?v=#{$fa-version}') format('woff2'),
font-url('#{$fa-font-path}/fontawesome-webfont.woff?v=#{$fa-version}') format('woff'),
font-url('#{$fa-font-path}/fontawesome-webfont.ttf?v=#{$fa-version}') format('truetype'),
font-url('#{$fa-font-path}/fontawesome-webfont.svg?v=#{$fa-version}#fontawesomeregular') format('svg');
font-weight: normal;
font-style: normal;
}
以下作品：
@font-face {
font-family: 'FontAwesome';
src: font-url('fontawesome-webfont.eot?v=#{$fa-version}');
src: font-url('fontawesome-webfont.eot?#iefix&v=#{$fa-version}') format('embedded-opentype'),
font-url('fontawesome-webfont.woff2?v=#{$fa-version}') format('woff2'),
font-url('fontawesome-webfont.woff?v=#{$fa-version}') format('woff'),
font-url('fontawesome-webfont.ttf?v=#{$fa-version}') format('truetype'),
font-url('fontawesome-webfont.svg?v=#{$fa-version}#fontawesomeregular') format('svg');
font-weight: normal;
font-style: normal;
}
另一种方法是简单地删除插值$fa-font-path之后的正斜杠，然后将$fa-font-path定义为空字符串或子目录，并带有正斜杠（根据需要）。
请记住重新编译资产并根据需要重新启动服务器。例如，在乘客设置上：
prompt> rake assets:clean; rake assets:clobber
prompt> RAILS_ENV=production RAILS_GROUPS=assets rake assets:precompile
prompt> service passenger restart
然后重新加载浏览器。
答案 7 :(得分：2)
最近我将Rails 3应用升级到Rails 4时遇到了类似的问题。我的字体在Rails 4+中工作不正常，我们只允许将字体保存在app/assets/fonts目录下。但我的Rails 3应用程序有不同的字体组织。因此，我必须配置应用程序，以便它仍然适用于Rails 4+，我的字体位于app/assets/fonts以外的其他位置。我已经尝试了几种解决方案，但在我找到non-stupid-digest-assets gem之后，它就变得如此简单了。
通过在Gemfile中添加以下行来添加此gem：
gem 'non-stupid-digest-assets'
然后运行：
bundle install
最后在 config / initializers / non_digest_assets.rb 文件中添加以下行：
NonStupidDigestAssets.whitelist = [ /\.(?:svg|eot|woff|ttf)$/ ]
就是这样。这很好地解决了我的问题。希望这可以帮助遇到类似问题的人。
答案 8 :(得分：2)
在我的情况下，原始问题是使用asset-url而没有结果而不是普通url css属性。使用asset-url最终在Heroku中为我工作。另外在/assets/fonts文件夹中设置字体并调用asset-url('font.eot')而不添加任何子文件夹或任何其他配置。
答案 9 :(得分：2)
这里是一个回购，演示了如何在Heroku上使用Rails 5.2提供自定义字体。它进一步完善并根据https://www.webpagetest.org/
优化了字体的投放速度https://github.com/nzoschke/edgecors
首先，我从上面的答案中选取了一些内容。对于Rails 5.2+，您不需要额外的资产管道配置。
app/assets/fonts @font-face声明放在scss文件中，并使用font-url帮助程序来自app/assets/stylesheets/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;
}
我正在使用CloudFront，并添加了Heroku Edge addon。
首先在Cache-Control中配置CDN前缀和默认的production.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错误：
CORS政策禁止从来源“ https://d1unsc88mkka3m.cloudfront.net/assets/Inconsolata-Regular.ttf”访问“ https://edgecors.herokuapp.com”的字体： 所请求的资源上没有“ 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
资产管道构建了.ttf.gz文件，但没有提供文件。这个猴子补丁将资产管道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缓存提供的。
答案 10 :(得分：1)
如果您有一个名为scaffolds.css.scss的文件，那么有可能会覆盖您在其他文件中执行的所有自定义操作。我注释掉了那个文件，突然间一切都运转了。如果该文件中没有任何重要内容，您也可以删除它！
答案 11 :(得分：-6)
只需将您的字体放在app / assets / fonts文件夹中，并在app开始时使用在application.rb中编写代码来设置自动加载路径
config.assets.paths＆lt;＆lt; Rails.root.join（“app”，“assets”，“fonts”） 和
然后在css中使用以下代码。
@ font-face {
font-family: 'icomoon';
src: asset-url('icomoon.eot');
src: asset-url('icomoon.eot') format('embedded-opentype'),
asset-url('icomoon.woff') format('woff'),
asset-url('icomoon.ttf') format('truetype'),
asset-url('icomoon.svg') format('svg');
font-weight: normal;
font-style: normal;
}
试一试。
由于