跨浏览器CSS用于打印

Question

我认为这样会更容易。

我正在实现的Web应用程序必须在a4纸上打印一些页面。 这些页面只是为打印而准备的（它们在“应用程序”中显示的不是相同的），因此我不需要在同一CSS中包含各种媒体类型的不同格式（它们与其他页面不同，单色，等）：我只需要为打印编写一种CSS样式。

我使用的基本CSS是Bootstrap V3，从中我删除了媒体类型“ print”的所有规则。 我使用第二个CSS来覆盖一些Bootstrap规则，而不覆盖其他文件。

问题是这个：

• 在屏幕上，我在Chrome和Safari中看到的页面完全相同；
• 打印的结果完全不同，尤其是在字体大小方面：Safari使用的字体要小得多。

您能建议我一种让两个浏览器以相同方式打印文件的方法吗？

Answer 1

大多数调试器允许您在特定的媒体类型中进行调试。 因此，对于打印，您可以将调试器设置为使用CSS media = print以轻松地根据需要操纵样式

过去，我在某些dt表中也遇到过类似的问题，我通过在我的print样式表中添加了额外的CSS重置层来解决了该问题。

无论如何，听起来您只需要在打印CSS中明确定义字体和字体大小。

@media print {
    html, body {
       font: Arial;
       font-size: 12px;
    }
}

我很难在没有您的有形资产的情况下提出其他建议，但这就是我的出发点。

Answer 2

如果您使用Chrome和Safari进行测试，则必须检查您是否使用相同的打印引擎进行预览，因为Chrome具有内置的打印引擎，并避免使用CTRL + SHIFT + P快捷键。 Chrome内置打印引擎存在很多错误。

Answer 3

以磅为单位使用字体大小进行打印可能会产生更均匀的结果。 像素用于屏幕。 点是度量的打印单位...字体大小：12pt；