使用Open Sans字体时,Chrome无法在首次打印时正确打印

Question

更新的问题

所以,我发现了造成这个问题的原因.事实上,正如这个问题所建议的那样,它是开放式的.现在我的问题是,为什么Chrome在第一次使用Open Sans时没有加载？

这就是我所看到的.Open Sans直接包含在项目中.我们提供了许多@font-facecss规则,而不是像上面这个问题中的import语句:

@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看过这个问题？你怎么修好它的？

---

原始问题

我对谷歌浏览器和打印问题感到困惑.第一次打开打印时,有一些特定元素缺失.每次在第一次之后,一切都很好.就像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和onafterprintFF和IE,我matchMedia用于Chrome.我仍然在研究它们,但这些在第一次延迟CSS样式和HTML元素的处理而不是后续时间似乎是不合理的.但是,我会继续研究它.

Answer 1

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

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

由于某种原因，这些 CSS 规则会得到及时处理，而其他规则则不会。