[已解决]经wkhtml2pdf转换后，字体不对了，该怎么跟原始html一致呢?

blackantt

[b]经查，wkhtml2pdf 在转pdf时，使用了html内容里的外联 a1.css  中的一部分，但字体部分可能没有使用。 需要在 原css 里指定字体的绝对位置；或者 wkhtml2pdf 的命令行 或者  options 里直接指定 a2.css
wkhtmltopdf_options = {"user-style-sheet": "a2.css"}[/b]



在a2.css的最前面指定  字体的绝对位置，并用 !important 强调
--------------------------------------------
@font-face{font-family: "Microsoft YaHei";src:url("C:\\Windows\\Fonts\\msyh.ttc")}
* {   
    font-family: "Microsoft YaHei" !important;
    font-weight:normal !important;
}

最佳答案

月排行榜 / 总排行榜

sfqxx

2023-5-24 20:38:30

wkhtml2pdf 是一个命令行工具，用于将 HTML 页面转换为 PDF 文件。在转换 HTML 页面时，如果字体不正确，可能是由于 wkhtml2pdf 没有正确加载字体文件导致的。

解决该问题的方法是在执行 wkhtml2pdf 命令时，指定正确的字体文件路径。可以使用 --user-style-sheet 选项来指定一个 CSS 样式表，在该样式表中添加如下内容：

@font-face {
    font-family: 'SimSun'; /* 替换成需要使用的字体名称 */
    src: url('/path/to/fontfile/SimSun.ttf'); /* 替换成字体文件的路径 */
}
body {
    font-family: 'SimSun', sans-serif; /* 替换成需要使用的字体名称 */
}

其中，font-family 属性用于定义字体族名称，src 属性用于指定字体文件的路径，body 表示该样式适用于整个页面。需要注意的是，指定的字体名称和文件路径应该与实际情况相符。

然后在使用 wkhtml2pdf 命令时，加入 --user-style-sheet 选项，指向该样式表即可，例如：

wkhtml2pdf --user-style-sheet /path/to/stylesheet.css input.html output.pdf

这样就能保证在转换 HTML 页面为 PDF 文件时，所使用的字体和原始 HTML 页面一致了。

有用请设置最佳答案

跳转到最佳答案楼层

歌者文明清理员

您可以尝试在转换命令中添加参数 --user-style-sheet，并指定一个包含字体属性的 CSS 文件。这样 wkhtml2pdf 在转换时就会应用该 CSS 文件中的样式，并保持与原始 HTML 一致的字体。例如：

Copy code

wkhtmltopdf --user-style-sheet style.css input.html output.pdf

请确保在您的 CSS 文件中包含正确的字体名称、大小和颜色等属性，以确保转换后的 PDF 文档与预期保持一致。

sfqxx

wkhtml2pdf 是一个命令行工具，用于将 HTML 页面转换为 PDF 文件。在转换 HTML 页面时，如果字体不正确，可能是由于 wkhtml2pdf 没有正确加载字体文件导致的。

解决该问题的方法是在执行 wkhtml2pdf 命令时，指定正确的字体文件路径。可以使用 --user-style-sheet 选项来指定一个 CSS 样式表，在该样式表中添加如下内容：

@font-face {
    font-family: 'SimSun'; /* 替换成需要使用的字体名称 */
    src: url('/path/to/fontfile/SimSun.ttf'); /* 替换成字体文件的路径 */
}
body {
    font-family: 'SimSun', sans-serif; /* 替换成需要使用的字体名称 */
}

其中，font-family 属性用于定义字体族名称，src 属性用于指定字体文件的路径，body 表示该样式适用于整个页面。需要注意的是，指定的字体名称和文件路径应该与实际情况相符。

然后在使用 wkhtml2pdf 命令时，加入 --user-style-sheet 选项，指向该样式表即可，例如：

wkhtml2pdf --user-style-sheet /path/to/stylesheet.css input.html output.pdf

这样就能保证在转换 HTML 页面为 PDF 文件时，所使用的字体和原始 HTML 页面一致了。

有用请设置最佳答案

blackantt

歌者文明清理员 发表于 2023-5-24 20:35
您可以尝试在转换命令中添加参数 --user-style-sheet，并指定一个包含字体属性的 CSS 文件。这样 wkhtml2pd ...

转换时，是通过 vscode 的http server的， 你看网址 127.0.0.1...,  应该已经调用了css与javascript， 不然pdf版面不是这样子

歌者文明清理员

blackantt 发表于 2023-5-24 20:39
转换时，是通过 vscode 的http server的， 你看网址 127.0.0.1...,  应该已经调用了css与javascript， 不 ...

如果您在转换前已经通过 HTTP 服务器将 HTML 文件和依赖的 CSS 和 JavaScript 文件提供给了 wkhtmltopdf，那么转换时应该会自动引用这些文件中的样式和脚本，并生成与原始 HTML 相匹配的 PDF。但如果您发现转换后的 PDF 文档仍然无法正确显示字体，可能是因为字体文件未正确加载导致。您可以尝试在 CSS 文件中使用 font-face 规则来引入所需的字体，例如：

复制代码

@font-face {
  font-family: 'MyFont';
  src: url('path/to/MyFont.ttf');
}
body {
  font-family: 'MyFont', sans-serif;
}

请确保在您的服务器上提供了正确的字体文件，并在 CSS 文件中使用正确的字体名称和路径等属性，以确保 WKHtmlToPdf 引用的字体文件与原始 HTML 中的字体文件相同。

sfqxx

根据您提供的信息，如果已经使用 http server 来启动了一个本地的 web 服务器，并且在该服务器中正常显示了正确的字体和样式，但是在使用 wkhtml2pdf 将 HTML 页面转换为 PDF 文件时，字体出现了问题，可能是由于 wkhtml2pdf 没有正确加载字体文件导致的。

具体来说，可能需要在 wkhtml2pdf 执行命令时，通过 --user-style-sheet 参数指定一个 CSS 样式表，以确保转换后的 PDF 文件与原始 HTML 页面一致。

以下是一个示例命令：

wkhtmltopdf --user-style-sheet /path/to/styles.css http://127.0.0.1:8000/ output.pdf

其中，/path/to/styles.css 是您指定的包含字体信息的样式表路径，http://127.0.0.1:8000/ 是您本地的 web 服务器地址，output.pdf 是输出的 PDF 文件名。请注意，样式表中应该包含正确的字体定义信息，例如：

@font-face {
  font-family: 'SimSun';
  src: url('/path/to/SimSun.ttf');
}
body {
  font-family: 'SimSun', sans-serif;
}

这样，在使用 wkhtml2pdf 转换 HTML 页面为 PDF 文件时，就能够正确使用指定的字体了。

sfqxx

歌者文明清理员 发表于 2023-5-24 20:42
如果您在转换前已经通过 HTTP 服务器将 HTML 文件和依赖的 CSS 和 JavaScript 文件提供给了 wkhtmltopdf ...

《复制代码》

blackantt

sfqxx 发表于 2023-5-24 20:44
根据您提供的信息，如果已经使用 http server 来启动了一个本地的 web 服务器，并且在该服务器中正常显示了 ...

好，我试试

sfqxx

blackantt 发表于 2023-5-24 20:45
好，我试试

blackantt

歌者文明清理员 发表于 2023-5-24 20:35
您可以尝试在转换命令中添加参数 --user-style-sheet，并指定一个包含字体属性的 CSS 文件。这样 wkhtml2pd ...

谢谢，果真如此。 html里指定的css不起作用。要在 wkhtml2pdf 后显式指定