wkhtmltopdf 是否尊重 css 字体颜色？答案

【问题标题】：Does wkhtmltopdf respect css font color?wkhtmltopdf 是否尊重 css 字体颜色？
【发布时间】：2020-11-26 19:12:36
【问题描述】：

我正在使用 wkhtmltopdf 生成页面的 pdf，但它没有以正确的颜色显示任何字体，它们都显示为黑色。

颜色定义如你所愿：

.panel-dashboard p.stat {
  color: #bed000;
}

在浏览器中查看时正确显示。

我称之为

wkhtmltopdf path/to/page filename

wkhtmltopdf 是否不能正确渲染字体颜色？我找不到与此相关的任何问题。

【问题讨论】：

你能给我们一个链接吗？我自己的字体颜色没有问题，所以我也想测试一下。
@Nenotlep 我在尝试使用 wkhtmltopdf 将其呈现为 PDF 的任何具有 CSS 样式的字体颜色的页面都有问题。您是否有一个示例页面，您可以从中正确生成 pdf，以便我可以进行测试？
当然！请参阅pastebin.com/j4JVy0V6 - 对我而言，生成的 PDF 与使用 0.11 版的预期一致。

标签： css wkhtmltopdf

【解决方案1】：

看来这是 wkhtmltopdf 0.9.9 的问题，0.11 正确呈现 css 字体颜色。

【讨论】：

【解决方案2】：

使用 0.12.2.4 版在 CSS 中指定白色字体（在灰色背景内）有效，但彩色字体（红色、橙色）却没有：

.header { background-color: #888; color: #fff; } /* works */
.orange { color: f80; } /* doesn't work in wkhtmltopdf */

直接在 div 上使用样式确实有效：

<div style="color:#f60;">My Orange Text</div>

可能是因为没有背景？？我不知道。

因此，如果您尝试使用 CSS 但它失败了，这可能会奏效......

【讨论】：

“.orange”的“颜色”需要前导“#”

【解决方案3】：

您可能正在使用this proposed CSS，它定义了@media print { * { color: black !important; } }

在此处使用 0.12.6 版本。结果如下所示：

[pandoc.css] @media print { * { color: black !important; } }
[my.css]     TODO2 { color: #700 !important; }
             TODO3 { color: #700; }
[file.md]    <TODO1 style="color: #700 !important;">black</TODO1>
             <TODO1 style="color: #700;">           black</TODO1>
             <TODO2>                                red</TODO2>
             <TODO3>                                black</TODO3>

和

[pandoc.css] @media print { * { color: black; /* not important */ } }
             /* or not using proposed pandoc.css at all */
[my.css]     TODO2 { color: #700 !important; }
             TODO3 { color: #700; }
[file.md]    <TODO1 style="color: #700 !important;">red</TODO1>
             <TODO1 style="color: #700;">           red</TODO1>
             <TODO2>                                red</TODO2>
             <TODO3>                                red</TODO3>

【讨论】：