为什么此网站在Chrome for Windows中打印为空白？它在我的Mac上完美无瑕。 （@media打印）

Question

所以我目前正在开发一个Web应用程序，它显示一个列表客户端，其中包含一个事务列表。用户需要能够打印单个客户的事务日志或所有事务。

我正在使用表来显示数据。在@media print CSS中，我有以下内容：

table{
  display:none; 
}
table.show-data-block{
  display:table; 
}

最初，所有表都有类.show-data-block。但是，我将打印按钮（位于客户端名称旁边）与以下内容绑定在一起：

$('.print-log').click(function(e){
        $('.show-data-block').removeClass('show-data-block');
        //I know, lots of nesting           
        var clientTable=$(this).parent().parent().parent().parent();
        if(!$('.'+$(clientTable).data('owns')).length<=0){
            $(clientTable).addClass("show-data-block"); 
        }
        $('.'+$(clientTable).data('owns')).addClass("show-data-block");
        window.print();
        //just to be safe
        setTimeout(function(){
            $('table').addClass('show-data-block');
        },500);
    });

在Chrome for Windows上，结果如下： Frustrating Printing Error \

但是，出于某种原因，当有人第二次点击该按钮时，它会正确显示。在我的Mac（Chrome）上，它第一次正确显示。

我们与客户签订的合同让我们只需要为Chrome开发，因此只需要在Chrome上运行。

有谁知道如何解决这个问题？我一直在努力解决这个问题并且用户/客户没有意识到在网络上进行优化打印是您可以给Web开发人员带来的最令人沮丧的事情之一。 ：（

Answer 1

所以我最终解决了这个问题。 @aardian是对的;部分问题在于我使用的是自定义字体。我意识到我使用的模板将字体设置为“Open Sans”。添加它解决了这个问题：

table tr > *{
    font-family:"Helvetica",sans-serif !important;
    /*This ensures the font renders properly.*/
    color:#000 !important 
    /*There are no styles setting the font to white but for some reason, this was needed.*/
}