Rails 4에서 글꼴을 사용하는 방법

Rails 4에서 글꼴을 사용하는 방법

---

Rails 4 애플리케이션이 있고 사용자 지정 글꼴을 사용하려고합니다.

나는 이것에 대한 많은 튜토리얼을 따랐고 어떻게 든 내 응용 프로그램에서 작동하지 않습니다.

사용 application.css.less하고 있으며 다음과 같은 선언이 있습니다.

@font-face {
    font-family: 'HDVPeace';
    src: font-url('HDV_Peace.eot');
    src: font-url('HDV_Peace.eot?iefix') format('eot'),
        font-url('HDV_Peace.woff') format('woff'),
        font-url('HDV_Peace.ttf') format('truetype'),
        font-url('HDV_Peace.svg#webfont') format('svg');
}

참고 : url() 대신 사용을 시도했습니다 font-url() . 전자는 콘솔에서 404 오류를 생성하고 후자는 아무것도하지 않는 것 같습니다. 리소스 아래의 크롬 개발 도구에서 글꼴 파일이 폴더 아래 또는 어디에도 나타나지 않습니다.assets

내에서 config/application.rb:

config.assets.paths << Rails.root.join('app', 'assets', 'fonts')

그리고 저 config/environments/development.rb와 저 모두 config/environments/production.rb:

config.assets.paths << Rails.root.join('app', 'assets', 'fonts')
config.assets.precompile += %w( .svg .eot .woff .ttf)

내 글꼴 파일은 다음 위치에 app/assets/fonts있으며 그 아래의 폴더에는 포함되어 있지 않습니다.

내가 무엇을 놓치고 있습니까?

최신 정보:

폴더 구조

app
 |----assets
        |----fonts
               |----HDV_Peace.eot
               |----HDV_Peace.svg
               |----HDV_Peace.ttf
               |----HDV_Peace.woff

---

귀하의 @font-face선언은 매우 가깝습니다 /assets. URL 선언 내에서 접두사가 누락되었습니다 .

@font-face {
    font-family: 'HDVPeace';
    src: url('/assets/HDV_Peace.eot');
    src: url('/assets/HDV_Peace.eot?iefix') format('eot'),
         url('/assets/HDV_Peace.woff') format('woff'),
         url('/assets/HDV_Peace.ttf') format('truetype'),
         url('/assets/HDV_Peace.svg#webfont') format('svg');
}

추가 된 모든 항목은 개발 및 프로덕션 경로 assets.paths아래에서 직접 사용할 수 있습니다 /assets. 당신은 내 자산 경로 수정 라인이 필요 application.rb다시 그 일을, development.rb그리고 production.rb단지 중복입니다.

또한 모든 글꼴 형식은 기본적으로 바이너리입니다. 미리 컴파일 할 필요가 없으므로 assets.precompile추가 항목을 안전하게 제거 할 수 있습니다 .

---

Rails 4에는 글꼴 경로를 설정하는 도우미가 있습니다.

/ assets / fonts 또는 vendor / assets / fonts에 글꼴이있는 경우 Rails 4에서 찾을 수 있습니다! 이를 활용하려면 Bootstrap CSS 파일에서 @font_face 호출을

@font-face {
  font-family: 'Glyphicons Halflings';
  src: font-url('glyphicons-halflings-regular.eot');
  src: font-url('glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), 
       font-url('glyphicons-halflings-regular.woff') format('woff'), 
       font-url('glyphicons-halflings-regular.ttf') format('truetype'), 
       font-url('glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
}

글꼴 파일 앞에는 폴더 사양이 없습니다. 이것은 레일 도우미에 의해 완료됩니다.

---

제발 하지 않는 위치가 동적이기 때문에 글꼴 디렉토리를 하드 코딩.

이미지에 대한 기본 제공 도우미가있는 것처럼 글꼴에 대한 기본 제공 도우미도 있습니다. http://api.rubyonrails.org/classes/ActionView/Helpers/AssetUrlHelper.html#method-i-font_url

예:

@font-face {
    font-family: 'QuicksandOTF';
    src: font_url('Quicksand-Regular.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

---

이것은 Rails 4.1 앱에서 저에게 효과적이었습니다.

1. `app / assets / fonts` 아래에 글꼴을 추가합니다.
2. 다음과 같이`.css.scss` 파일에서 호출합니다.

@font-face {
  font-family: 'icomoon';
  src: url(font-path('icomoon.eot') + "?#iefix") format('embedded-opentype'),
    url(font-path('icomoon.woff')) format('woff'),
    url(font-path('icomoon.ttf'))  format('truetype'),
    url(font-path('icomoon.svg') + "#icomoon") format('svg');
}
[class^="icon-"], [class*=" icon-"] {
  font-family: 'icomoon';
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

---

app / assets / fonts 디렉토리를 만든 후 'rails 서버'를 다시 시작하십시오.

---

이 기사를 통해 모든 문제를 해결했습니다.

http://aokolish.me/blog/2011/12/24/at-font-face-with-the-asset-pipeline/

---

Rails 5에서 글꼴을 사용하는 데 문제가있는 경우 편집 만하면됩니다. app/assets/config/manifest.js

그리고 이것을 삽입하십시오 //= link_tree ../fonts

사용하는 방법:

@font-face { font-family: 'FontAwesome'; src: url('fontawesome-webfont.eot?v=4.6.3'); src: url('fontawesome-webfont.eot?#iefix&v=4.6.3') format('embedded-opentype'), url('fontawesome-webfont.woff2?v=4.6.3') format('woff2'), url('fontawesome-webfont.woff?v=4.6.3') format('woff'), url('fontawesome-webfont.ttf?v=4.6.3') format('truetype'), url('fontawesome-webfont.svg?v=4.6.3#fontawesomeregular') format('svg'); font-weight: normal; font-style: normal; }

And also dont forget to restart your server.

---

Sometimes fonts are not detected from the assets/fonts directory.

If security is not an issue, we can put the fonts directory into the public folder. They will then be available at a public/ level.

---

Forget about changing anything in Rails 4 in your application.rb. Just add /assets/ prefix like @Parker Selbert said and the following will work:

@font-face {
  font-family: 'custom-font-name';
  src: font-url('/assets/_folder_/fontX-webfont.eot');
  src: font-url('/assets/_folder_/fontX-webfont.eot?#iefix') format('embedded-opentype'),
       font-url('/assets/_folder_/fontX-webfont.woff') format('woff'),
       font-url('/assets/_folder_/fontX-webfont.ttf') format('truetype'),
       font-url('/assets/_folder_/fontX-webfont.svg#sociconregular') format('svg');
  font-weight: normal;
  font-style: normal;

}

참고URL : https://stackoverflow.com/questions/18294150/how-to-use-fonts-in-rails-4