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

Question

更新问题

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

这是我看到的。 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>

screen/normalCSS如下：

.myHide { display: none !important; }

打印CSS如下：

.myHide { display: block !important; }

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

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

注意：我查看了 a similar question 但字体并未像该项目那样导入，因此该解决方案将不起作用（除非它是 Open Sans 本身的问题而不是如何导入的问题它被导入到项目中）。

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

Answer 1

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

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

出于某种原因，这些 CSS 规则得到及时处理，而其他规则则没有。

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

Chrome Not Printing Correctly On First Print When Using Open Sans Font

html

css

fonts

google-chrome

font-face