SVG字体使用Rails资产管道和S3主机 [英] SVG Fonts with Rails Asset Pipeline and S3 Hosting

问题描述

我有一个Rails项目，托管在Heroku上，和我刚搬到我的托管资产S3。这已荡然无存顺利，除了一些自定义的字体（从icomoon SVG字体）。他们没有工作，当我查看我的网页源代码，我可以看到我的S3存储显示不出来：

<$p$p><$c$c>@font-face{font-family:'Starter-Icons';src:url(https://.s3.amazonaws.com/fonts/Starter-Icons.eot);src:url(https://.s3.amazonaws.com/fonts/Starter-Icons.eot?#iefix)

等。然而，托管与S3其他资产（图片，样式表，等等）都包括适当的bucket名称。

我的字体面声明是在.LESS文件（这并不需要成为一个.less.erb文件，不是吗？）

  @字体面{
字体家庭：起动器图标;
SRC：字体URL（精简 -  Icons.eot）;
SRC：字体链接（？起动 -  Icons.eot #iefix）格式（嵌入式OpenType字体），
    字体URL（精简 -  Icons.woff）格式（WOFF），
    字体URL（精简 -  Icons.ttf）格式（TrueType字体），
    字体URL（精简 -  Icons.svg＃入门-图标）格式（SVG）;
字体重量：正常;
字体风格：正常;
 

}

我所有的字体是 / APP /资产/字体。我已经遵循这里接受的答案，但事实上，我的桶的名字没有显示出来的字体，使我相信这是一个不同的问题。

修改

我现在用的是asset_sync宝石本，其配置为如下：

 如果定义？（AssetSync）
  AssetSync.configure做|配置|
  config.fog_provider =AWS
  config.fog_directory ='starterapp

  config.aws_access_key_id = ENV ['STARTER_AWS_ACCESS_KEY_ID']
  config.aws_secret_access_key = ENV ['STARTER_AWS_SECRET_ACCESS_KEY']

  ＃不要从商店中删除文件
  config.existing_remote_files ='守'

  ＃自动与他们相当于gzip的COM pressed版本替换文件
  config.gzip_com pression =真
结束
 

结束

解决方案

嗯，（联合国）幸运的是 - 它的工作原理，现在，我所做的就是捆绑EXEC耙资产：precompile （再次），并推到Heroku的（再次）。该捆绑EXEC耙资产：precompile 清理掉旧的编译CSS / JS /字体文件，并建立新的。我pviously这一步$ P $并没有得到这些结果，所以我不知道它是怎么连的工作。

本可以一直在用户的错误 - 我不认为这实际上是怎样做它的工作。另一个令人困惑的事情是运行

  IRB（主）：001：0＆GT; Rails.application.config.assets.paths
 

返回

  =＆GT; [/程序/应用程序/资产/字体，/程序/应用程序/资产/图像，/程序/应用程序/资产/ JavaScript的，/程序/应用程序/资产/样式
 

和我不知道如何 /应用程序/应用程序/资产是越来越生产创造VS / APP /资产/ 的发展，但是，它的工作原理。

I have a Rails project, hosted on Heroku, and I just moved hosting my assets to S3. This has all gone smooth EXCEPT for some custom fonts (SVG fonts from icomoon). They're not working, and when I view my web source, I can see that my S3 bucket doesn't show up:

@font-face{font-family:'Starter-Icons';src:url(https://.s3.amazonaws.com/fonts/Starter-Icons.eot);src:url(https://.s3.amazonaws.com/fonts/Starter-Icons.eot?#iefix) 

etc. However, other assets (images, stylesheets, etc) hosted with S3 do include the proper bucket name.

My font-face declarations are in a .less file (this doesn't need to be a .less.erb file does it?)

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

}

All my fonts are in /app/assets/fonts. I've followed the steps in the accepted answer here, but the fact that my bucket name isn't showing up for the fonts leads me to believe it's a different issue.

EDIT

I am using the asset_sync gem for this, its config is below:

if defined?(AssetSync)
  AssetSync.configure do |config|
  config.fog_provider = 'AWS'
  config.fog_directory = 'starterapp'

  config.aws_access_key_id = ENV['STARTER_AWS_ACCESS_KEY_ID']
  config.aws_secret_access_key = ENV['STARTER_AWS_SECRET_ACCESS_KEY']

  # Don't delete files from the store
  config.existing_remote_files = 'keep'

  # Automatically replace files with their equivalent gzip compressed version
  config.gzip_compression = true
end

end

解决方案

Well, (un)fortunately -- it works now, and all I did is bundle exec rake assets:precompile (again) and push to Heroku (again). The bundle exec rake assets:precompile cleared out the old compiled css/js/font files, and built new ones. I did this step previously and didn't get these results, so I'm not sure how it's even working.

This could've been user error--I don't see how this actually made it work. Another confusing thing is running

irb(main):001:0> Rails.application.config.assets.paths

returns

=> ["/app/app/assets/fonts", "/app/app/assets/images", "/app/app/assets/javascripts", "/app/app/assets/stylesheets"

and I'm not sure how /app/app/assets is getting created on production vs /app/assets/ on development, but, it works.

这篇关于SVG字体使用Rails资产管道和S3主机的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！