css - 无法使用@media print 在我的打印 View 上设置字体颜色和字体粗细的样式

Question

我正在构建一个单页应用程序(使用 Angular)，它基本上包含一个多步骤表单，完成后可以打印。

在这里您可以看到打印 View 示例部分的外观，其中包含颜色和不同的字体粗细:

发生的事情是，当我点击打印时(无论是通过浏览器菜单还是通过我随 javascript:if(window.print)window.print() 提供的按钮)，打印文档的字体是全黑，只有一个重量。

这是它的样子:

我尝试使用 @media print 重新设置它的样式，但没有成功。例如，我可以更改字体大小和边距/填充，但我无法更改文本的颜色或字体粗细。

例如:

@media print {
    html, body {
        color: yellow;
        font-size: 0.9em;
    }
}

上面的代码片段确实减少了我的字体大小，但没有减少颜色。

然而，您可以看到分隔每个元素的那些细的灰色边框确实以其原始颜色显示。

这是为什么？我怎样才能让这个打印文档的字体颜色和粗细与我在浏览器上看到的相同？

编辑:除了 Chrome 中非常基本的选项外，没有其他打印机设置:

Answer 1

您应该在 CSS 中直接在元素上使用 -webkit-print-color-adjust: exact;。即:

.my-element{ 
    -webkit-print-color-adjust: exact;
}