4

私はwicked-pdfgem (v1.2.2) を使用して、素晴らしいフォント アイコンを含む PDF レポートを生成しています。

fontawesome ファイルを次のパスに保存しました。

vendor/assets/fonts/fontawesome.css.erb

およびこのパスの対応するフォント:

vendor/assets/fonts/fontawesome/fa-brands-400.eot

fontawesome.css.erbからのサンプル スニペット: (これがフォントの参照方法です)


/*!
 * Font Awesome Free 5.5.0 by @fontawesome - https://fontawesome.com
 * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
 */

@font-face {
  font-family: 'Font Awesome 5 Brands';
  font-style: normal;
  font-weight: normal;
  src: url('<%= asset_path 'fontawesome/fa-brands-400.eot' %>');
  src: url('<%= asset_path 'fontawesome/fa-brands-400.eot' %>?#iefix') format("embedded-opentype"), url('<%= asset_path 'fontawesome/fa-brands-400.woff2' %>') format("woff2"), url('<%= asset_path 'fontawesome/fa-brands-400.woff' %>') format("woff"), url('<%= asset_path 'fontawesome/fa-brands-400.ttf' %>') format("truetype"), url('<%= asset_path 'fontawesome/fa-brands-400.svg#fontawesome' %>') format("svg"); }

アセット パイプラインを使用しています。

以下のように、fontawesome をレポート レイアウト ( report.html.erb)に含めました。

<%= stylesheet_link_tag wicked_pdf_asset_base64('fontawesome.css') %>

デバッグ モードで PDF を読み込むと、正方形のボックスのみが表示され、PDF に何も表示されません。ここに画像の説明を入力

この質問を参照しました: Font Awesome が機能しない、アイコンが四角で表示される

ローカル ファイルの代わりに fontawesome への CDN リンクを追加しました。デバッグモードでのみ機能しました。

PDFモードで試したところ、読み込みに時間がかかり、最終的にフォントが表示されませんでした。したがって、これは私にとって解決策ではありません。

皆様のご意見をお待ちしております。ありがとう


変更点:fontawesome.css.erbフォント ファイルへの絶対参照を使用して 更新しました。

@font-face {
  font-family: 'Font Awesome 5 Free';
  font-style: normal;
  font-weight: 400;
  src: url('<%= ActionController::Base.helpers.wicked_pdf_asset_path('fontawesome/fa-brands-400.woff') %>');
}

デバッグ モードで、Chrome ブラウザに次のエラーが表示されます。

Not allowed to load local resource: file:///home/Projects/my_app/vendor/assets/fonts/fontawesome/fa-brands-400.woff


4

2 に答える 2