Wicked PDF - 将超棒的字体图标显示为方框
Wicked PDF - showing fontawesome icons as sqaure box
我正在使用 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"); }
I am using asset pipeline.
我已将 fontawesome 添加到报告布局 (report.html.erb
) 中,如下所示:
<%= stylesheet_link_tag wicked_pdf_asset_base64('fontawesome.css') %>
当我在调试模式下加载 PDF 时,我只得到 方框 而我在 PDF 中看不到任何东西。
我提到了这个问题:Font Awesome not working, icons showing as squares
并将 CDN link 添加到 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
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,还有一个错误,字体的后备 url 不起作用)
由于对 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 需要完整的 url 并且不能使用相对路径。
我正在使用 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"); }
I am using asset pipeline.
我已将 fontawesome 添加到报告布局 (report.html.erb
) 中,如下所示:
<%= stylesheet_link_tag wicked_pdf_asset_base64('fontawesome.css') %>
当我在调试模式下加载 PDF 时,我只得到 方框 而我在 PDF 中看不到任何东西。
我提到了这个问题:Font Awesome not working, icons showing as squares
并将 CDN link 添加到 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
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,还有一个错误,字体的后备 url 不起作用)
由于对 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 需要完整的 url 并且不能使用相对路径。