CSS 颜色 属性 在@media print 上无法正常工作

Question

我正在构建一个 Web 应用程序，它基本上由一个大表单组成，提交后可以打印。

但是，我的打印文档中的文本似乎从未受到 color 和 font-weight CSS 属性的影响。

这是文档的一小部分，它在屏幕上看起来像：

然而，打印时，它最终看起来像这样：

字体相同，但由于某种原因没有应用任何样式。我没有 @media print 的覆盖 CSS 设置，所以它不应该看起来完全一样吗？

为什么我的常规样式没有应用到打印文档（打印文档是指当您单击浏览器的“打印”按钮时出现的文档）？

编辑： 根据要求发布一些示例代码来说明我的问题：

@media print {

    html {
        margin: 0;
        padding: 0;
        width: 100%;
        font-size: 0.9em;
        color: yellow !important;
    }
}

在上面的代码片段中，每个属性都可以正常工作 除了 颜色，即使在使用 !important 标签时也是如此。我不知道为什么会这样。

Answer 1

我在使用您的代码时没有发现任何问题（为便于理解而稍作修改）：

html {
  margin: 0;
  padding: 0;
  width: 100%;
  font-size: 100px;
  color: red !important;
}
@media print {
  html {
    color: yellow !important;
  }
}

Red for web, Yellow for print

我在 safari 中的打印预览将文本显示为黄色（ish 0 看起来有点绿色，但颜色肯定是 不是 红色）。我不确定你的问题出在哪里，但是这段代码不是。

Answer 2

我找到了问题的根源：Bootstrap。

我使用 Chrome 的检查器工具在仿真选项卡中查看打印样式，如下图所示：

然后我选择了未正确应用颜色的元素，这导致我出现了这个 gem:

@media print {
    *,
    *:before,
    *:after {
        background: transparent !important;
        color: #000 !important; // Black prints faster: h5bp.com/s
        box-shadow: none !important;
        text-shadow: none !important;
    }

    // Other code...
}

Bootstrap 用讨厌的 * !important 组合覆盖了我所有的样式， 甚至会覆盖 和 html {color: yellow !important}因为 CSS's specificity rules.

为了解决我的问题，我可以从 Bootstrap 中删除上面的片段，或者制作我自己的所有颜色 !important。

Answer 3

我没有使用 bootstrap，但遇到了同样的问题，好几天都无法解决。终于发现更改打印样式的“字体系列”有帮助。

@media print {
body
{
    font-family: system-ui, sans-serif, auto !important;
}