打印预览与我在浏览器中看到的不同

Question

更新： <canvas>渲染已添加到演示中  这引入了另一个问题：打印预览视觉是模糊。

我有一个简单的页面用于打印EAN-13型条形码视觉。请参阅演示here。

全黑＆amp;白条只不过是<span>个元素，并且应用了一些样式。

在浏览器窗口中看到：

在打印预览中看到：

如你所见;

• 第二个黑条有失真
• 最后两个酒吧应该是相同的，但它们的宽度不同。

为了在浏览器窗口中查看确切的视觉效果，我需要做些什么？

（注意：我使用的是Chrome 48.0.2564.97 m）