web-dev-qa-db-ja.com

@ font-face in Rails 4.0 with Sass URL not found for custom fonts

私のRailsプロジェクトでは、カスタムフォントを使用しようとしています。この質問に関連する回答はたくさんありますが、役に立たなかったこの回答のように、_development.rb_を編集しました。

_# Add the fonts path
config.assets.paths << Rails.root.join('app', 'assets', 'fonts')

# Precompile additional assets
config.assets.precompile += %w( .svg .eot .woff .ttf )
_

それでも_No route matches [GET] "/assets/chalkduster-webfont.woff"_が表示されます

私はurlを次のように設定しました：

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

}
_

ソース内でfont_path('')を試しましたが、font-url()も機能しません。 :(

ruby-on-railsfontsruby-on-rails-4font-face
15
user1999510

asset-url()を試してください。私のために働きます。

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

また、フォントパスを追加し、config/environment /production.rbに追加のアセットをプリコンパイルするだけです。

# Add the fonts path
config.assets.paths << Rails.root.join('app', 'assets', 'fonts')

# Precompile additional assets
config.assets.precompile += %w( .svg .eot .woff .ttf )

asset-urlは少し魔法のように機能するため、config/environment /development.rbに追加する必要はありません。

32
Nicholas.V

不要なインポートを実装するのがより簡単な代替手段を見つけました。これは次のとおりです。フォントファイルをbase64テキストに変換できます。 Base64エンコードの選択を必ず確認してください enter image description here

次に、[変換]をクリックして、ページを生成する.Zipファイルをダウンロードします。 .Zipファイル内でde.cssを開くと、必要なコードが表示されます。 enter image description here

私はjverbanのソリューションを実装しようとしましたが、私にとってはうまくいきません。

それから私はそれをする2つの方法を説明するtutoを見つけました クリックしてtutoを開きます

そして私は2番目の解決策（ハッカーのやり方）を試します。唯一行うことは、app/assets/stylesheets内のfontsフォルダーを移動することです。 （私はあなたがfontsという名前のフォルダの中にあなたのすべてのフォントを置いたと思います）

次に、cssファイルo scssで、このコードを使用して実行できます。

@font-face {
    font-family: 'GoodDDC';
    src: url(asset_path("fonts/GOODDC.ttf"));
}

Railsフォルダapp/assets/stylesheetsのasset_pathリファレンス

ツリーフォルダは次のようになります

app/assets/stylesheets/fonts/yourfont.ttf (wof, etc)
1
Juan David Zapata Yepes