[ruby-on-rails] Rails 자산 파이프 라인에서 글꼴 사용
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 제공 자산 /icoMoon.ttf-404 찾을 수 없음 (13ms)에 127.0.0.1 용 “/assets/icoMoon.ttf”GET 시작
자산 파이프 라인이 글꼴 파일을 / assets로 병합하지 않는 이유는 무엇입니까?
어떤 아이디어 사람들?
친절, 닐
추가 정보 :
레일스 콘솔에서 자산 경로 및 assetprecompile을 확인할 때 다음을 얻습니다.
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답변
-
당신의 레일 버전 사이 인 경우
> 3.1.0와< 4, 이들 폴더 중 하나에 글꼴을 배치 :app/assets/fontslib/assets/fontsvendor/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. -
당신이 레일에 말대꾸 이하를 사용하는 경우
> 3.1.0(CSS 파일이 있습니다.scss또는.less확장자 확장자)를 사용하는url(...)경우 글꼴 선언에서을로 변경하십시오font-url(...).그렇지 않으면 CSS 파일의 확장자
.css.erb는이어야하고 글꼴 선언은이어야합니다url('<%= asset_path(...) %>').Rails
> 3.2.1를 사용font_path(...)하는 경우 대신 사용할 수 있습니다asset_path(...). 이 도우미는 정확히 같은 작업을 수행하지만 더 명확합니다. -
마지막으로
font-family부분 에서 선언 한대로 CSS에서 글꼴을 사용하십시오 . 대문자로 선언 된 경우 다음과 같이 사용할 수 있습니다.font-family: 'Icomoon';
답변
이제 비틀기가 있습니다.
당신은 모든 글꼴을 배치해야합니다
app/assets/fonts/그들은 같은 것 푸시 경우에 의해 준비 및 생산에 미리 컴파일 얻을 기본은 – 그들이 미리 컴파일 얻을 것이다 Heroku가 .글꼴은 배치 파일
vendor/assets것 NOT 기본적으로 준비 또는 생산에 미리 컴파일 할 수 – 그들은 실패합니다 Heroku가 . 출처!
— @plapier, thinkbot / bourbon
벤더 글꼴을 넣는
vendor/assets/fonts
것이 글꼴을 넣는 것보다 훨씬 의미가 있다고 생각합니다app/assets/fonts. 이 두 줄의 추가 구성을 사용하면 나에게 잘 작동했습니다 (레일 4).
app.config.assets.paths << Rails.root.join('vendor', 'assets', 'fonts')
app.config.assets.precompile << /\.(?:svg|eot|woff|ttf)$/나는 또한 그것을 테스트했다 rails 4.0.0. 실제로 마지막 한 줄이면 vendor폴더 에서 글꼴을 안전하게 미리 컴파일하기에 충분 합니다. 알아 내기 위해 몇 시간을 걸렸습니다. 그것이 누군가를 도왔기를 바랍니다.
답변
글꼴 이동을 추적하지 않으려면 다음을 수행하십시오.
# Adding Webfonts to the Asset Pipeline
config.assets.precompile << Proc.new { |path|
if path =~ /\.(eot|svg|ttf|woff)\z/
true
end
}답변
font-url@ font-face 블록에서 사용해야 합니다.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")답변
자산 파이프 라인에서 글꼴을 사용하는 방법은 다음과 같습니다.
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
답변
Rails 4.2 (ruby 2.2.3) 에서이 문제가 발생했으며 font-awesome _paths.scss 부분을 편집하여 $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그런 다음 브라우저를 다시로드하십시오.
답변
Rails 4.2를 사용하고 있으며 footable 아이콘이 표시되지 않습니다. 축소 된 행의 (+) 대신 작은 상자가 표시되고 내가 예상 한 작은 정렬 화살표가 표시됩니다. 여기에서 정보를 연구 한 후 코드를 간단하게 변경했습니다. CSS에서 글꼴 디렉토리를 제거하십시오. 즉, 다음과 같이 모든 CSS 항목을 변경하십시오.
src:url('fonts/footable.eot');이처럼
src:url('footable.eot');효과가있었습니다. Rails 4.2는 이미 글꼴 디렉토리를 가정하고 있으므로 CSS 코드에서 다시 지정하면 글꼴 파일을 찾을 수 없습니다. 도움이 되었기를 바랍니다.
