自定义字体在使用 WKHTMLTOPDF 库生成的 PDF 中不起作用

2023-12-25

我正在使用 Laravel 5.1 SnappyPDF 包装器,它使用WKHTMLTOPDF图书馆。我正在尝试为我的 PDF 文件包含一些自定义谷歌字体,但这些字体在生成的 PDF 文件中不起作用。

我尝试过,将字体转换为Base64还尝试通过绝对 URL 和相对 URL 包含字体,还尝试了堆栈溢出中提供的许多答案,但没有一个对我有用。如何解决这个问题。

//Calling fonts
@font-face {
    font-family: Roboto Condensed;
    src: url("/fonts/RobotoCondensed-Regular/RobotoCondensed-Regular.ttf");
}
@font-face {
    font-family: 'Open Sans';src: url("/fonts/OpenSans/OpenSans-Regular.ttf");
}

@font-face {
    font-family: 'Open Sans Semi Bold Italic';
    src: url("/fonts/OpenSans/OpenSans-SemiboldItalic.ttf");
}

 //implenting fonts
.report-page2-col-wrapper .col-heading{
    font-family:"Open Sans Semi Bold Italic";
    font-size:12pt;
    line-height:17pt;
}

查看屏幕截图的差异

1) 这是网络浏览器 HTML 版本,看起来查找和字体实现正确


2) 这是生成的 PDF 版本,字体应用不正确



有多种解决方案可以实现此目的:

1)如果您使用谷歌字体,请尝试以下: 使用<link>包括谷歌字体

<link href='http://fonts.googleapis.com/css?family=YOURFONTFAMILY' rel='stylesheet' type='text/css'>

Use <style>应用字体效果

<style type = "text/css">
    p { font-family: 'YOURFONTFAMILY'; }
</style>

2)对字体进行编码Base64编码工具 http://www.opinionatedgeek.com/dotnet/tools/base64encode/并在CSS中使用它

@font-face {
    font-family: 'YOURFONTFAMILY';
    src: url(data:font/truetype;charset=utf-8;base64,AAEAAAATAQA...
}

希望以上之一是您的解决方案!

采取参考:将自定义字体与 wkhtmltopdf 一起使用 https://stackoverflow.com/questions/10611828/use-custom-fonts-with-wkhtmltopdf, helvetica 字体在 wkhtmltopdf 中不起作用 https://stackoverflow.com/questions/15746240/helvetica-font-not-working-in-wkhtmltopdf

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

自定义字体在使用 WKHTMLTOPDF 库生成的 PDF 中不起作用 的相关文章

  • 如何在node.js中使用express框架提供图像文件?

    在我的应用程序中 我使用 Express 框架来服务客户端文件 但是在为 html 元素提供背景图像时 它显示无法加载给定的 url var express require express http require http var app
  • 将动态值传递给 Laravel max 验证规则

    我正在开发一个销售 laravelcollective 表单 其中销售数量进入不能大于DB中的stock quantity 当我在以下位置使用这个想法时 Laravel 使用自定义消息验证动态添加的输入 https stackoverflo
  • 在 CSS 选择器中转义双引号

    我有一个 html 标签 div style background image url div images test jpg gt 我想使用 CSS 选择器来定位这个元素 我尝试了下面的选择器 但它抛出错误 document queryS
  • 如何创建一个对角分割的页面,两半是可点击的链接

    我需要创建一个对角分割的登陆页面 像这样的东西 我需要页面的两个区域都是可单击的 并且在最好的情况下 所有内容都应该动态地适应用户的显示器 以便显示器始终分成两半 我该怎么做 我应该使用画布吗 欢迎任何建议 以及如果我使用画布可能的后备方案
  • 粉碎一个元素,向随机方向发送碎片

    我试图 粉碎 一个元素 例如 一个图像 并将其碎片朝随机方向飞行 当碎片到达目的地时 即x距离 以像素为单位 它们变成原始图像的较小版本 jQuery UI 的explode http api jqueryui com explode ef
  • Laravel 中 Twitter Bootstrap 导航的自动活动类

    和大多数人一样 我正在使用 Twitter Bootstrap 来构建我目前在 Laravel 中开发的网站 到目前为止 我很喜欢使用 Laravel 作为与 Rails 相当的 PHP 但我想知道是否有更好的方法来制作导航栏 我试图确保我
  • 如何更改点击事件上的引导插入符指向方向

    我正在使用 2 3 2 引导程序 因为当我单击菜单按钮时 我可以更改插入符号图标的位置 我需要当我单击图标插入符号向上时 当您单击另一个项目时 插入符号返回到初始状态 这怎么可能 导航代码 div div class container d
  • 使用 htaccess 重写规则重定向后 CSS 未加载

    我有以下用户个人资料网址的简写 RewriteRule w profile php name of user 1 当我这样做时 该网站使用适当的 css 文件进行样式设置site com name of user 但当我这样做的时候却不是s
  • Firefox 和 Chrome 为 offsetTop 提供了不同的值

    我试图相对于输入字段定位一个跨度元素 让我们称之为 工具提示跨度 为此 我将工具提示跨度和输入字段包装在另一个跨度元素中 我们称之为 包装器跨度 该元素具有position relative 然后我设置position absolute在工
  • Bootstrap - 为反向行模式创建移动自适应

    我想用 Bootstrap 创建一个反向效果 第一行 左边是文字 右边是图像 第二行 左边是图片 右边是文字 第三行 左边是文字 右边是图片 第四行 左边是图片 右边是文字 而且这种情况一直持续下去 它在大型设备上看起来非常漂亮 但当它在设
  • 没有宽度/高度的 SVG 以自然尺寸渲染

    我有这个 SVG 但没有width or height属性 我有以下 HTML div class block img src https s3 eu vAmfIxVv kiwi svg div 使用以下CSS block display
  • 从 CSS 调用 javascript 函数

    我想知道是否有可能以任何方式 button width somePX height somePX button hover onmouseup func button 或类似的东西 我想这会有点酷吗 而不是为每个按钮编写 onmouseup
  • CSS 中“!important”的反义词是什么?

    我正在构建一个 jQuery 插件 它使用 CSS 样式向嵌套 DIV 标签添加颜色和边距 由于我宁愿将插件保留为单个文件 因此我的代码使用 jQuery 将这些颜色和边距作为 CSS 属性直接添加到 DIV 中 css 方法 这些属性的值
  • 图像上的文本和背景颜色叠加

    我正在尝试创建一个与图像大小完全匹配的纯色叠加层 并在该叠加层上显示文本 如果可能的话 我想仅使用 HTML 和 CSS 来完成此操作 图像可以是任何大小 并且将调整大小以适合其父容器并居中 像这样的东西 不起作用 HTML div cla
  • iOS 10.3 safari text-align:调整波斯语/阿拉伯语内容的错误

    在更新到 10 3 之前 我的网站在 iPhone 的所有移动浏览器上都能正常运行和查看 从我将 iOS 更新到 10 3 后 我的内容页面遇到了一个问题 内容被包装在 div CSS 属性为text align justify 我的内容在
  • Chrome 将 0 宽度的表格单元格显示为 1px

    在 Firefox 中 我相信是正确的 由于 width 0 看不到红色 div 但在 Chrome 中 它显示为具有 1px 宽度 这似乎是最新版本 Chrome 的问题 这把小提琴 http jsfiddle net bFZf4 显示问
  • 如何使 Flexbox 父级具有其子级的宽度?

    我有一个父元素 里面有两个元素 div class parent div class child one div div class child two div div 目前 parent 的宽度为 100 我希望它只是两个孩子的宽度 pa
  • Div 上的倾斜边框

    我正在尝试倾斜一个 div 类似于 使用 css 倾斜 div 的顶部而不倾斜文本 https stackoverflow com questions 13591584 slant the top of a div using css wi
  • 将 SVG 元素放置在图像上

    是否可以拥有以下元素并设置它们的样式 以便 SVG 对象出现在图像上 即像图像的一部分 目前它们显示在其下方的新行中 我知道我可以将图像设置为父 div 的背景图像 但不幸的是我还需要能够在父级内旋转它 所以我认为这不是一个选项 div s
  • 如何将 twitter bootstrap 与 Spring MVC 一起使用

    我不明白为什么我的 Spring MVC 页面没有隐藏引导样式 我的你好 jsp

随机推荐

  • IOS 双击单元格导致 UITableView 中的项目不会滚动

    我有一个UITableView其中包含UITextField在每个细胞中当我点击UITextField在单元格中 键盘将显示并覆盖我的单元格 因此 我通过使用将单元格移动到顶部 void keyboardWasShown NSNotific
  • 导出 cytoscape.js 中选定的节点和边

    有没有一种方法可以从图形中导出选定的节点和边并在另一个图形中显示选定的节点和边 maxkfranz说我们可以导出为json 你知道我该怎么做吗 谢谢 您是否尝试过以下内容 cy selected json 编辑 API 现在还允许使用多个元
  • Typescript“无法编译”错误作为警告

    我创建了一个应用程序npx create react app my app typescript我想配置它 以便我的应用程序仍然可以编译 尽管打字稿错误 以便我可以在准备好时返回它们 我没有看到任何compilerOptions为了这 是否
  • 日光浴室用户弃用警告

    自从我在项目中使用 Solarium 以来 我收到了此警告 你知道我该如何解决吗 User Deprecated Not passing an instance of AdapterInterface as the first constr
  • Android 使用 setNumStars 在执行过程中更改星星使收视率变得奇怪

    我正在使用 rb setNumStars int 将星星从给定的默认值 例如 5 更改为具有应用程序首选项的新值 例如 4 代码执行正常 刷新片段后 我可以看到星星数量更改为我设置的任何整数 条形图的 StepSize 为 1 问题是 当我
  • 是否可以从移动设备获取唯一的识别码?

    我目前正在开发移动设备 Web 应用程序 我想知道每个设备是否有某种可以通过浏览器检测到的唯一 ID 号 目的是存储这个号码 以便识别已经访问过该网站的人 我经常使用蓝牙 当您检测到设备时 您可以存储某种 MAC 地址 我将其用作 ID 号
  • 仅对象属性更改时如何触发重组 Jetpack-Android

    想象一下下面的物体 data class CourseState val key Int 0 val name String val courses Courses Courses 实现以下模式 private val courseStat
  • 是否可以从 Sonatype Nexus Repository Manager 3.x 中的本地文件夹部署工件

    I use Sonatype Nexus 存储库管理器 3 5 2并想添加文物 to Nexus Blob 商店从本地文件夹 联系所在的位置 我在 Nexus 文档中找不到解决方案 并尝试在网络中找到 不成功 是否可能以及如何做到这一点 也
  • 在 PowerShell 中获取伟大的祖父文件夹路径(向上三级)?

    有没有一种优雅的方法可以从文件夹路径获取 曾祖父母文件夹 三层 我只是想得到C folderA folderB从完整的路径来看 但这两种解决方案对我来说都显得丑陋 path C folderA folderB folderC FolderD
  • Android Studio Bumblebee 频繁崩溃

    我想知道是否有其他人遇到过这个问题并找到了解决方法 Android Studio Bumblebee 随机且频繁地崩溃 没有模式 当我做某事 例如 编辑代码 或有时什么都不做时 它会崩溃 当我启动 AS 或使用它一段时间后 它可能会崩溃 它
  • 检查多维输入数组中的值

    我将值存储在多维隐藏输入数组中 如下所示
  • 为什么 git rebase 的合并冲突通常比合并少?

    我经常听到有人说 与 git merge 相比 使用 git rebase 可以减少合并冲突的数量 但我从未找到解释为什么会出现这种情况 当两个人都修改同一行代码时 简单地在另一组更改之上重放一组更改并不能神奇地消除固有冲突 那么是什么让
  • Perl:全局符号需要显式包名称

    因此 我一直在尝试找到解决方案 但到目前为止 我在网上阅读的所有内容都与范围问题有关 而不是用my关键词 然而 我似乎无法解决这些问题 因为我已经在顶部声明了所有内容 并且至少对我来说 似乎我没有范围问题 我的以下代码的错误是 Global
  • Cloudera Manager 有其他选择吗? (CDH)[关闭]

    Closed 这个问题正在寻求书籍 工具 软件库等的推荐 不满足堆栈溢出指南 help closed questions 目前不接受答案 正如Cloudera官方博客所说 从6 3 3开始就没有免费版本的CDH 他们会让Cloudera M
  • .net框架中内置的抽象类都有哪些? [关闭]

    很难说出这里问的是什么 这个问题是含糊的 模糊的 不完整的 过于宽泛的或修辞性的 无法以目前的形式得到合理的回答 如需帮助澄清此问题以便重新打开 访问帮助中心 help reopen questions 我一直在寻找但无法找到合适的列表 有
  • 寻找一种良好的空间划分数据结构,以快速生成数百万个原子键

    我正在执行一些涉及数百万个原子的系统的 MD 模拟 我编写了一些代码来生成一个文件 该文件只是 XYZ 原子坐标的列表 现在我需要在原子之间生成键 如果两个原子彼此之间的距离在一定距离内 则被视为键 XYZ 文件示例 1 0 0 2 0 0
  • Java 中的 HTTPResponse 作为 JSON

    我试图从 HTTP 响应中获取 JSONObject try GetMethod postMethod new GetMethod postMethod setURI new URI url true postMethod setReque
  • 在菜单按钮之前和之间留出等宽的间隙

    我使用下面的代码创建了一个滚动菜单 我试图在每个菜单精灵按钮之间创建相等的行间隙 宽度间距 目前 我已经能够在左右两端留出等宽间距 但不能在精灵按钮之间留出等宽间距 请参阅下面的相关代码 class LevelScene SKScene l
  • 向函数传递/返回数组(而不是指针)引用的一般规则?

    我们可以将数组的引用传递给函数 例如 void f int a 5 int x 5 f x okay int y 6 f y error type of y is not int 5 或者更好的是 我们可以编写一个函数模板 template
  • 自定义字体在使用 WKHTMLTOPDF 库生成的 PDF 中不起作用

    我正在使用 Laravel 5 1 SnappyPDF 包装器 它使用WKHTMLTOPDF图书馆 我正在尝试为我的 PDF 文件包含一些自定义谷歌字体 但这些字体在生成的 PDF 文件中不起作用 我尝试过 将字体转换为Base64还尝试通