邪恶PDF -显示字体图标作为sqaure框

Question

我正在使用wicked-pdf创业板(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"); }

我在使用资产管道。

我已经在报告布局(report.html.erb)中包含了以下内容：

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

当我在调试模式下加载PDF时，我只得到方框，而在PDF中看不到任何内容。

​

我提到这个问题：Font Awesome not working, icons showing as squares

并将CDN链接添加到fontawesome以代替本地文件。它只在调试模式中工作。

当我尝试在PDF模式，它需要很长时间的加载时间，最后它没有显示字体。因此，这对我来说不是一个解决办法。

期待您的投入。谢谢

​

更改：i使用字体文件的绝对引用更新了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

Answer 1

Wickedpdf将html作为本地文件打开，所以所有urls都应该是相对于某个临时文件夹、完整的本地文件路径(这些路径是由邪恶的pdf助手生成的)或与主机的绝对urls。

您的fontawesome.css包含默认不包含主机的字体文件的urls。您可以为pdf生成创建一个单独的版本，也可以在html模板head本身中包括：

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

(不需要iefix，可以使用较少的格式，因为我们确信wkhtmltopdf不是IE，还有一个错误，错误的字体不起作用)

Answer 2

wicked_pdf_stylesheet_pack_tag和wicked_pdf_stylesheet_link_tag助手似乎对方框不太友好，因为相对路径引用了网页字体。

以下内容对我有效(使用webpacker).

yarn add @fortawesome/fontawesome-free

在app/javascript/packs/reports.js中(任意命名包)：

import '@fortawesome/fontawesome-free/scss/fontawesome.scss'
import '@fortawesome/fontawesome-free/scss/solid.scss'
// add other icons as necessary

然后在布局文件中：

= stylesheet_link_tag asset_pack_url('reports.css')

使用asset_pack_url而不是asset_pack_path很重要，因为wicked_pdf需要完整的url，不能使用相对路径。