使用Open Sans字体时，Chrome第一次打印不正确

Question

更新的问题

所以，我找到了导致这个问题的原因。正如这个问题中建议的那样，它实际上是Open Sans。现在我的问题是，为什么使用Open Sans时Chrome第一次不加载？

这是我看到的。Open Sans直接包含在项目中。与上面的问题中的导入语句不同，我们有许多@font-face css规则，比如这一个：

@font-face {
    font-family:'Open Sans';
    font-style:normal;
    fontweight:300;
    src:url('../fonts/OpenSans-Light-webfont.eot');
    src:url('../fonts/OpenSans-Light-webfont.eot?#iefix')
    format('embedded-opentype'), url('../fonts/OpenSans-Light-webfont.woff')
    format('woff'), url('../fonts/OpenSans-Light-webfont.ttf')
    format('truetype'), url('../fonts/OpenSans-Light-webfont.svg#open_sanslight')    
    format('svg')
}

如果我注释掉它们，我使用的<h3>标签会正常加载。如果我保留它们，第一次不会加载，但是每次之后都会加载。有没有其他使用Open Sans的人遇到这个问题？你们是如何解决的？

---

原始问题

我在使用Google Chrome打印时遇到了问题。第一次打开打印时，会缺少一些特定的元素。之后每次打印都正常加载。就好像CSS规则没有完全处理完成，然后打印预览就渲染出来了。

该页面使用Bootstrap 3和一些自定义样式。有问题的元素的HTML如下：

<h3 class="myHide">Some text</h3>

屏幕/普通CSS如下：

.myHide { display: none !important; }

打印CSS如下：

.myHide { display: block !important; }

不幸的是，我不能分享实际的CSS和HTML，但上面的内容在功能上是相同的。第一次打印时，所有具有该类的<h3>都不会显示，但应该出现的地方有空白。之后每次打印，它都会正常显示。我只在Chrome中看到这个问题。无论我如何打印，FF和IE每次都可以正常工作。

我已经尝试了一些主要是对CSS进行微调的方法。其中一个尝试是从自定义类切换到Bootstrap提供的显示/隐藏类，但观察到相同的行为。我花了很长时间在谷歌上搜索解决方案，尝试不同的选项，并与他人交流，但还没有找到有效的解决方案，所以我希望在这里能找到有人看到过这个问题。

注意：我查看了一个类似的问题，但是字体并没有像这个项目那样导入，因此该解决方案不起作用（除非Open Sans本身存在问题，而不是它被导入到项目中的问题）。

更新：该页面确实有一些监听打印事件的函数。具体来说，我使用onbeforeprint和onafterprint来处理FF和IE，我使用matchMedia来处理Chrome。我仍在研究它们，但似乎这些函数会延迟第一次处理CSS样式和HTML元素，而不是后续次数。但是，我会继续研究。

- jvdub

---

你是否有一个像 div 这样的元素包含你要隐藏/显示的 h3 元素？ - NotJay

似乎可能是渲染问题，浏览器没有及时绘制元素，您尝试添加短延迟了吗？ - Adjit

所以，我尝试添加了一个短延迟并认为它起作用了，但实际上并没有（这是我第二次尝试打印）。 - jvdub

@Adjit，感谢你找到那个问题。看了一下，我觉得那不是我需要的。我有一些运行的函数，但它们监听媒体变化...但也许这就是问题所在。Chrome的打印事件监听器与FF和IE不同，所以问题可能出在那个函数上...我会去看看的。 - jvdub

看起来在 Firefox 中页面样式在 matchMedia 运行之前呈现，而在 Chrome 中 matchMedia 函数在打印样式呈现之前运行。这仍然无法回答为什么大多数页面都可以正常呈现，但这些特定的 h3 元素却无法呈现的问题。 - jvdub

Answer 1

最终只是改变了使用的样式。不再使用 display: none，而是使用以下内容：

.my-hide {
  display: block !important;
  height: 0px;
  overflow: hidden;
}
@media print {
  .my-hide {
    height: auto;
  }
}

由于某些原因，这些CSS规则能够及时处理，而其他规则则不能。

- jvdub

---

7年后确认）实际上，存在两个不同但相似的问题：在打印iframe时使用display: none会导致各种不一致性，例如在启用DevTools时缺少渲染某些元素。此外，使用display: none无法移除Google字体。使用上述解决方案后，预览从第二次点击开始出现，然后移除Google字体才有效果。看起来很像是在初始化预览时，它会从头开始渲染内容，使用一种简化的渲染器，不会等待字体加载，并且不会遵守display: none。 - undefined