使用Open Sans字體時，Chrome無法在首次打印時正確打印

Question

更新的問題

所以，我發現了造成這個問題的原因。 事實上，正如這個問題所建議的那樣，它是開放式的。 現在我的問題是，為什么Chrome在第一次使用Open Sans時沒有加載？

這就是我所看到的。 Open Sans直接包含在項目中。 我們有許多@font-face css規則，而不是上面這個問題中的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和onafterprint for FF和IE，我使用matchMedia for Chrome。 我仍然在研究它們，但這些在第一次延遲CSS樣式和HTML元素的處理而不是后續時間似乎是不合理的。 但是，我會繼續研究它。

Answer 1

結束只是改變使用的樣式。 而不是使用display: none我現在使用以下內容：

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

出於某種原因，這些CSS規則會及時處理，而其他規則則不會。