0

CSS フォントをロードする CSS ブロックは次のとおりです。

@font-face {
    font-family: 'HelveticaNeueRegular';
    src: url('../fonts/helveticaneue/helveticaneue-roman.eot');
    src: url('../fonts/helveticaneue/helveticaneue-roman.eot?#iefix') format('embedded-opentype'),
         url('../fonts/helveticaneue/helveticaneue-roman.woff') format('woff'),
         url('../fonts/helveticaneue/helveticaneue-roman.ttf') format('truetype'),
         url('../fonts/helveticaneue/helveticaneue-roman.svg#helvetica_neueregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

フォントは/app/assets/fontsディレクトリにあります。

ローカルホストでは、ページをロードするとフォントがロードされませんが、Heroku ではすべてのフォントが正しくロードされます。

なにが問題ですか？

4

3 に答える 3

0

これは、アセット パイプラインの動作に関係しています。

  • 開発環境では、すべてのアセットが から動的にサーバー化され/app/assets/...ます。
  • 本番環境では、アセットがコンパイルされ、Web サーバーが現在の静的ファイルを取得できる場所に移動されます。/public/assets/

あなたのfonts.css(偶然にも?) パスが本番環境のファイルを指していると思われます。

状況を解決するには、基本的に次の 2 つのオプションがあります。

  1. フォント ファイルを/publicディレクトリ (例: /public/fonts) に移動し、そこからファイルを参照します。

    @font-face {
  font-family: 'HelveticaNeueRegular';
  src: url('/fonts/helveticaneue/helveticaneue-roman.eot');
  src: url('/fonts/helveticaneue/helveticaneue-roman.eot?#iefix') format('embedded-opentype'),
       url('/fonts/helveticaneue/helveticaneue-roman.woff') format('woff'),
       url('/fonts/helveticaneue/helveticaneue-roman.ttf') format('truetype'),
       url('/fonts/helveticaneue/helveticaneue-roman.svg#helvetica_neueregular') format('svg');
  font-weight: normal;
  font-style: normal;
}

  2. Rails のアセット ヘルパーを使用します。良い紹介はここにあります。

于 2013-05-26T13:01:28.080 に答える