跨浏览器CSS打印

Question

我以为这样会更容易。

我正在实现的一个web应用程序必须在a4纸上打印一些页面。这些页面只是为了被打印而准备的(它们在‘app’中显示的不一样)，所以我不需要在相同的CSS中为不同的媒体类型包括不同的格式(它们不同于其他页面、单色等等)：我只需要为打印写一个CSS样式。

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

问题是这个：

• 在屏幕上，我看到了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

在打印点中使用字体大小可能会产生更一致的结果。像素是用于屏幕的。点是一个打印单位的测量.字体大小:12 of；