Question

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

在这里，您可以看到打印视图的示例部分的外观，颜色和不同的字体粗细：

当我点击打印时（无论是通过浏览器菜单还是通过我提供的output按钮），打印文档的字体都是黑色的，只有一个重量。

这是它的样子：

我尝试使用javascript:if(window.print)window.print()重新设置样式但无济于事。我可以更改字体大小和边距/填充，但我无法更改文本的颜色或字体粗细。

例如：

@media print

上面的代码段会减少我的字体大小，但不会减少颜色。

然而，您可以看到分隔每个项目的那些薄的灰色边框确实以原始颜色显示。

这是为什么？如何将此打印文档与浏览器中显示的字体颜色和重量相同？

编辑：除了我们在Chrome中的基本选项外，没有任何打印机设置：

Answer 1

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

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