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

Question

更新问题

所以，我找到了导致此问题的原因。事实上，它是 open sans 中建议的 this question .现在我的问题是，为什么 Chrome 在使用 Open Sans 时没有第一次加载？

这就是我所看到的。 Open Sans 直接包含在元素中。我们有一些 @font-face 而不是上面问题中的 import 语句像这样的 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>那个类(class)没有出现，但它应该在的地方有空白。之后每次我点击打印时，它都显示正常。我只在 Chrome 中看到这个问题。无论我如何打印，FF 和 IE 每次都能正常工作。

我尝试了一些主要是对 CSS 进行小调整的方法。我尝试的一件事是从显示/隐藏内容的自定义类切换到 Bootstrap 中提供的内容，但观察到相同的行为。我花了很长时间在谷歌上搜索解决方案，尝试不同的选择，并与其他人讨论这个问题，但还没有找到一个可行的解决方案，这让我来到这里希望有人看到了这个。

注意:我看过a similar question但是字体不会像该元素那样导入，因此该解决方案将不起作用(除非它是 Open Sans 本身的问题，而不是它如何导入到元素中的问题)。

更新:页面确实有一些监听打印事件的函数。具体来说，我使用 onbeforeprint和 onafterprint对于 FF 和 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 规则得到及时处理，而其他规则则没有。