Programming

Rails 자산 파이프 라인에서 글꼴 사용

procodes 2020. 3. 3. 23:09
반응형

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

  1. 당신의 레일 버전 사이 인 경우 > 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

  2. 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. 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(...). 이 도우미는 정확히 같은 작업을 수행하지만 더 명확합니다.

  4. 마지막으로 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)$/

— @jhilden, 씽크 봇 / 버번

나는 또한 그것을 테스트했다 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 코드에서 다시 지정하면 글꼴 파일을 찾을 수 없습니다. 도움이 되었기를 바랍니다.

최근에 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)$/ ]

그게 다야. 이것은 내 문제를 훌륭하게 해결했습니다. 이것이 나와 비슷한 문제가 발생한 사람에게 도움이되기를 바랍니다.

제 경우에는 원래 질문이 asset-url일반 urlCSS 속성 대신 결과없이 사용 되었습니다. 사용 asset-urlHeroku가 나를 위해 일 끝났다. 또한 /assets/fonts폴더에 글꼴을 설정하고 asset-url('font.eot')하위 폴더 나 다른 구성을 추가하지 않고 호출 합니다.

다음은 Heroku에서 작동하는 Rails 5.2로 사용자 정의 글꼴을 제공하는 데모입니다. https://www.webpagetest.org/ 에 따르면 가능한 한 빨리 글꼴 제공을 최적화합니다.

https://github.com/nzoschke/edgecors

시작하기 위해 위의 답변에서 조각을 골랐습니다. Rails 5.2+의 경우 추가 자산 파이프 라인 구성이 필요하지 않습니다.

자산 파이프 라인 및 SCSS

  • 에 글꼴 배치 app/assets/fonts
  • 장소 @font-face하는 SCS 파일에 선언하고 사용하는 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;
}

CORS를 사용하여 CDN에서 제공

Heroku Edge addon 과 함께 추가 된 CloudFront를 사용하고 있습니다.

먼저 다음에서 CDN 접두사 및 기본 Cache-Control헤더를 구성하십시오 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 오류가 발생합니다.

'에서 글꼴에 액세스 할 https://d1unsc88mkka3m.cloudfront.net/assets/Inconsolata-Regular.ttf 원점에서'가 ' https://edgecors.herokuapp.com 'CORS 정책에 의해 차단되었습니다 없음 '액세스 제어가-허용 -원본 헤더가 요청 된 리소스에 있습니다. edgecors.herokuapp.com/ GET https://d1unsc88mkka3m.cloudfront.net/assets/Inconsolata-Regular.ttf net :: ERR_FAILED

따라서 Heroku에서 CDN URL로 글꼴에 액세스 할 수 있도록 CORS를 구성하십시오. 

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파일을 빌드 하지만 제공하지는 않습니다. 이 원숭이 패치는 자산 파이프 라인 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 캐시 에서 제공되는 사용자 정의 글꼴 파일입니다 .

scaffolds.css.scss라는 파일이 있으면 다른 파일에서 수행중인 모든 사용자 지정 작업을 재정의 할 가능성이 있습니다. 나는 그 파일을 주석 처리하고 갑자기 모든 것이 작동했습니다. 해당 파일에 중요한 것이 없다면 삭제해도됩니다!

app.assets / fonts 폴더 안에 글꼴을 넣고 application.rb에서 코드 작성을 시작할 때 자동로드 경로를 설정하십시오.

config.assets.paths << 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;

}

시도 해봐.

감사

참고 URL : https://stackoverflow.com/questions/10905905/using-fonts-with-rails-asset-pipeline



반응형

'Programming' 카테고리의 다른 글

Linux에서 pthread_create에 대한 정의되지 않은 참조  (0) 2020.03.03
PHP Explode ()와 동등한 자바 스크립트  (0) 2020.03.03
IIS7 권한 개요-ApplicationPoolIdentity  (0) 2020.03.03
언제 &amp; 왜 대리자를 사용해야합니까?  (0) 2020.03.03
Sass Nesting for : hover가 작동하지 않음  (0) 2020.03.03

'Programming'의 다른글

  • 현재글Rails 자산 파이프 라인에서 글꼴 사용

관련글

댓글

티스토리툴바