問題

カスタムフォントをロードする次のSASSコードがあります。

 @font-face
  font-family: 'Fredericka the Great'
  font-style: normal
  font-weight: 400
  src: local('Fredericka the Great'), local('FrederickatheGreat'), asset-url('assets/fredericka_the_great.woff2') format('woff2')
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215
 

開発では、正常に読み込まれます。

私のサーバーの1つでは、そうではありません。生成されたコードをより詳しく見ると、コンパイルされたCSSでは、woff-fileをロードするハッシュが追加されていないことに気付きました。

 @font-face{
  font-family:"Fredericka the Great";
  font-style:normal;
  font-weight:400;
  src:local("Fredericka the Great"),local("FrederickatheGreat"),url(/assets/fredericka_the_great.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2212,U+2215}
 

ご覧のとおり、コンパイルされたコードはurl(/assets/fredericka_the_great.woff2)を生成しますが、サーバー上ではデプロイされたアセットは次のようになります。

screenshot

だから私の意見では、CSSはurl(/assets/fredericka_the_great-49badd2a1e856a1d9e3a6cb6189f0426bda9f2b292376395758419c2d0c631b6.woff2)を生成する必要があります。実際、ファイルを手動でロードしようとすると動作します:

興味深いのは、他のサーバーでは、同じアプリケーションが期待どおりに動作するという事実です(これは、CSSにハッシュがないため、奇妙に思えます)。

(より近いCSS検査のために、 https://audit.uber.space/assets/application-9e5ba30be64b818da5468c9b39dc20aafa0ce523315d3e6684b96d11e336f603.css - または、ちょうど https://audit.uber.space/assets/application.css )

私が非常に疑問に思うのは、サーバー上のwoff-fileの名前を完全に異なるものに変更すると、ファイルはまだウェブサイトによってロードされているという事実です。だからおそらくサーバーはコンパイルされたwoff-fileを送信しませんが、いくつかの完全に異なるwoff-file(おそらくgemディレクトリか何かかから直接)...?

期待される動作が何であるか、展開を修正する方法がわからないので、今進む方法がわかりません。

完全性のために、ここに私の展開の設定があります(私はminaを使用します):

 $ mina -d

------- Printing current config variables -------
:debug_configuration_variables => true
:port => 22
:releases_path => #<Proc:[email protected]/Users/josh/.rvm/gems/[email protected]/gems/mina-1.2.3/tasks/mina/deploy.rb:3 (lambda)>
:shared_path => #<Proc:[email protected]/Users/josh/.rvm/gems/[email protected]/gems/mina-1.2.3/tasks/mina/deploy.rb:4 (lambda)>
:current_path => #<Proc:[email protected]/Users/josh/.rvm/gems/[email protected]/gems/mina-1.2.3/tasks/mina/deploy.rb:5 (lambda)>
:lock_file => "deploy.lock"
:deploy_script => "data/deploy.sh.erb"
:keep_releases => 5
:version_scheme => :sequence
:execution_mode => :pretty
:bundle_bin => "bundle"
:bundle_path => "vendor/bundle"
:bundle_withouts => "development test"
:bundle_options => #<Proc:[email protected]/Users/josh/.rvm/gems/[email protected]/gems/mina-1.2.3/tasks/mina/bundler.rb:6 (lambda)>
:shared_dirs => ["vendor/bundle", "log", "tmp/cache", "public/assets", "public/uploads", "tmp/sockets", "tmp/pids"]
:rails_env => "production"
:bundle_prefix => #<Proc:[email protected]/Users/josh/.rvm/gems/[email protected]/gems/mina-1.2.3/tasks/mina/rails.rb:5 (lambda)>
:rake => #<Proc:[email protected]/Users/josh/.rvm/gems/[email protected]/gems/mina-1.2.3/tasks/mina/rails.rb:6 (lambda)>
:rails => #<Proc:[email protected]/Users/josh/.rvm/gems/[email protected]/gems/mina-1.2.3/tasks/mina/rails.rb:7 (lambda)>
:compiled_asset_path => "public/assets"
:asset_dirs => ["vendor/assets/", "app/assets/"]
:migration_dirs => ["db/migrate"]
:branch => "master-nine"
:remove_git_dir => true
:remote => "origin"
:git_not_pushed_message => #<Proc:[email protected]/Users/josh/.rvm/gems/[email protected]/gems/mina-1.2.3/tasks/mina/git.rb:6 (lambda)>
:web_server => :puma
:puma_role => #<Proc:[email protected]/Users/josh/.rvm/gems/[email protected]/gems/mina-puma-1.1.0/lib/mina/puma/tasks.rake:7 (lambda)>
:puma_env => #<Proc:[email protected]/Users/josh/.rvm/gems/[email protected]/gems/mina-puma-1.1.0/lib/mina/puma/tasks.rake:8 (lambda)>
:puma_config => #<Proc:[email protected]/Users/josh/.rvm/gems/[email protected]/gems/mina-puma-1.1.0/lib/mina/puma/tasks.rake:9 (lambda)>
:puma_socket => #<Proc:[email protected]/Users/josh/.rvm/gems/[email protected]/gems/mina-puma-1.1.0/lib/mina/puma/tasks.rake:10 (lambda)>
:puma_state => #<Proc:[email protected]/Users/josh/.rvm/gems/[email protected]/gems/mina-puma-1.1.0/lib/mina/puma/tasks.rake:11 (lambda)>
:puma_pid => #<Proc:[email protected]/Users/josh/.rvm/gems/[email protected]/gems/mina-puma-1.1.0/lib/mina/puma/tasks.rake:12 (lambda)>
:puma_cmd => #<Proc:[email protected]/Users/josh/.rvm/gems/[email protected]/gems/mina-puma-1.1.0/lib/mina/puma/tasks.rake:13 (lambda)>
:pumactl_cmd => #<Proc:[email protected]/Users/josh/.rvm/gems/[email protected]/gems/mina-puma-1.1.0/lib/mina/puma/tasks.rake:14 (lambda)>
:pumactl_socket => #<Proc:[email protected]/Users/josh/.rvm/gems/[email protected]/gems/mina-puma-1.1.0/lib/mina/puma/tasks.rake:15 (lambda)>
:puma_root_path => #<Proc:[email protected]/Users/josh/.rvm/gems/[email protected]/gems/mina-puma-1.1.0/lib/mina/puma/tasks.rake:16 (lambda)>
:rvm_use_path => "$HOME/.rvm/scripts/rvm"
:application_name => "A4AA 2.0"
:domain => "zugangfueralle01.nine.ch"
:deploy_to => "XXX"
:repository => "XXX"
:user => "www-data"
:forward_agent => true
:puma_port => 3006
:shared_files => ["config/secrets.yml"]
 

  ベストアンサー

私は数ヶ月前に同じ問題に遭遇しました。これは私がそれを解決した方法です:

1. - ルート、最初のものが最初です。 最善の方法は、app -> assets -> fonts (You create this folder)に保存することです。次に、読み込み可能な方法でフォントファイル(.woff)を追加することをお勧めします。

2. - SASS 私は特に私のapplication.scssまたはcustom.scssにこのコードを追加する必要がありました

 @font-face {
    font-family: 'Theola Kids Regular';
    font-style: normal;
    font-weight: normal;
    src:font-url('theola-kids.woff');
    src:font-url('theola-kids.woff') format('woff');
} 
 

src:font-urlに気付き、特定のフォントファイルを見つけるようにレールに指示します。私はルートとルートフォーマットファイルの2つを持っています。

3. - ピプリン

application.rbファイルに「フォント」を追加してください 例:config.assets.paths << Rails.root.join("app", "assets", "fonts") 完了すると、レールサーバーを再起動してチェックアウトします。このソリューションで動作する必要があります。

詳細については、この記事を高くお勧めします。 https://gist.github.com/anotheruiguy/7379570

頑張って!

  同じタグがついた質問を見る

ruby-on-railsdeploymentasset-pipelinecustom-font