用于打印的跨浏览器CSS

Question

我认为这会更容易。

我正在实施的网络应用必须在a4纸上打印一些页面。这些页面只是为了打印而准备（它们在＆＃39; app＆＃39;中显示的不同），因此我不需要在同一CSS中包含各种媒体类型的不同格式（它们与其他页面，单色等）：我只需要为打印件编写一种CSS样式。

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

问题在于：

屏幕上的
• 我在Chrome和Safari中看到完全相同的页面;
• 打印结果完全不同，特别是对于字体大小的问题：Safari使用的字体要小得多。

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

Answer 1

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

我过去曾遇到类似问题的dt个表，我通过在print样式表中添加额外的css重置层来解决这个问题。

无论如何，听起来你只需要在print css中明确定义字体和字体大小。

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

如果没有你的实际情况，我很难提出任何其他建议，但这是我要开始的地方。

Answer 2

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

Answer 3

在打印点中使用字体大小可能会产生更均匀的结果。像素用于屏幕。点数是打印单位...字体大小：12pt;