web-dev-qa-db-ja.com

@ font-faceをRails 3.1 app？

次の使用に問題があります@font-face宣言で動作するRails 3.1 app。フォントをimagesとstylesheetsの横にある "Fonts"という独自のフォルダーのアセットパイプラインに配置しますおよびjavascripts

これが私が使用した宣言です（Font Squirrelによって生成されます）。

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

だれでも、Rails 3.1アプリで@ font-faceをうまく利用していますか？

更新

私はこのスレッドを読んだだけです http://spin.atomicobject.com/2011/09/26/serving-fonts-in-Rails-3-1/ 変更すると言われましたurlfont-url宣言内。残念ながらそれもうまくいかなかったようです。

cssruby-on-rails-3.1font-facesass
32
pruett

フォルダーをアセットパス（ファイルconfig/application.rbへ）に追加する必要があります。 Railsガイド を参照してください

config.assets.paths << "#{Rails.root}/app/assets/fonts"

また、asset_pathヘルパーを使用する必要があります。

src: url('<%= asset_path('Chunkfive-webfont.eot') %>');
43
topek

これは古い質問ですが、Rails 3.2でこの問題に出くわしました。以前投稿されたドキュメントへのリンクを読んだ後は、application.rbを編集する必要はありませんでした。私がする必要があるすべては私のスタイルシートで（sassを使って）次のことをすることでした

@font-face {
    font: {
       family: 'Junction';
       weight: 'normal';
       style: 'normal';
    }
    src: asset-url('Junction-webfont.eot', font);
    src: asset-url('Junction-webfont.eot', font) format('embedded-opentype'),
         asset-url('Junction-webfont.woff', font) format('woff'),
         asset-url('Junction-webfont.ttf', font) format('truetype'),
         asset-url('Junction-webfont.svg#JunctionRegular', font) format('svg')
}

したがって、URLを使用する代わりに、ファイルとアセットクラス（この場合は「フォント」）の2つの引数を取る汎用のアセットURLを使用しました。

41
Greg Stewart

Rails 3.1以降では、font-urlを直接呼び出すことができます。このように：

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

最終的なCSSがそのようになることを期待してください：

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

通常は動作します:)

14
Alvaro Lourenço

Rails 4.0（これが4に固有であるかどうかは不明ですが、とにかく））を使用して、url(font_path('font-name.ttf'))でのみ機能させることができました。フォントパスをアセットパスも必要ありませんでした（config.assets.paths << "#{Rails.root}/app/assets/fonts"）。

だから、私にはこれがうまくいきました：

@font-face {
  font-family: 'ChunkFiveRegular';
  src: url(font_path('Chunkfive-webfont.eot'));
  src: url(font_path('Chunkfive-webfont.eot?#iefix')) format('embedded-opentype'),
     url(font_path('Chunkfive-webfont.woff')) format('woff'),
     url(font_path('Chunkfive-webfont.ttf')) format('truetype'),
     url(font_path('Chunkfive-webfont.svg#ChunkFiveRegular')) format('svg');
  font-weight: normal;
  font-style: normal;
}
6
rachel

Atomic ObjectのSpinブログの記事を更新しました。これがCSS変換です（あなたはSass構文を見ていました）

@font-face {
  font-family: "Merriweather";
  src: url(/assets/merriweather-black-webfont.eot);
  src: local("Merriweather Heavy"), local("Merriweather-Heavy"), url(/assets/merriweather-black-webfont.eot?#iefix) format("embedded-opentype"), url(/assets/merriweather-black-webfont.woff) format("woff"), url(/assets/merriweather-black-webfont.ttf) format("truetype"), url(/assets/merriweather-black-webfont.svg#MerriweatherHeavy) format("svg");
  font-weight: 900;
  font-style: normal;
}
1
Jared

これは遅いですが、コンパスの+font-faceこの問題をすべて回避するためのミックスイン。ミックスインはあなたの人生をより簡単にするのに役立ちます

  1. 従来のフォントフェイスのデクレレーションのひどい警告を覚えていない

  2. 内部でurl_helperとフォーマット宣言を処理します

  3. 覚えるのがはるかに簡単です

それは次のように宣言されています。

+font-face("#{$font-name}",
  font-files("#{$font-name}.woff", woff, 
  "#{$fontFileName}.ttf", ttf, 
  "#{$fontFileName}.svg", svg), "#{$fontFileName}.eot", normal, normal);
0
Kevin_L22

私は3.1.1を使用しており、フォントはvendor/assets/store（Spree実装）にあります。ここで与えられた解決策は私にとってはうまくいきませんでした、そして私は結局私の解決策となったものを試しました-必要はありませんでした

EOTのsrc属性の例を次に示します。

src: url('1617A5_4.eot');

私はこれに少し混乱していますが、アセットがコンパイルされると、アセットはすべて親フォルダー（assets/store /）にコピーされ、その時点でスタイルシートはそれらを取得できます。

0
David