邪恶的PDF-显示方形字体的字体图标

Question

我正在使用wicked-pdf gem（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 not working, icons showing as squares

，并将CDN链接添加到fontawesome而不是本地文件。 它只能在调试模式下工作。

当我在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

---

Answer 1

Wickedpdf将html作为本地文件打开，因此所有URL应相对于某些临时文件夹，完整的本地文件路径（这些路径由wicked pdf帮助程序生成）或带有主机的绝对URL。

您的fontawesome.css包含指向默认情况下不包含主机的字体文件的url。您可以为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

由于相对于Webfonts的相对路径引用，wicked_pdf_stylesheet_pack_tag和wicked_pdf_stylesheet_link_tag助手似乎对fontawesome的使用不太好。

以下对我有用（使用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需要完整的网址，并且无法使用相对路径。