鉻未正確打印在首頁打印使用Open Sans字體

所以，當我發現什麼是導致此問題。事實上，它是如this question所建議的那樣開放。現在我的問題是，爲什麼Chrome在第一次使用Open Sans時沒有加載？

這是我所看到的。 Open Sans直接包含在項目中。取而代之的是import語句如上面的問題，我們有一些@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看過這個問題？你怎麼修好它的？

原始的問題

我難倒與谷歌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中提供的東西，但觀察到相同的行爲。我花了很長時間搜索解決方案，嘗試不同的選擇，並與其他人討論這個問題，但還沒有找到一個可行的解決方案，但我希望這裏有人能看到這個。

注意：我查看了a similar question，但字體沒有像這個項目那樣導入，所以解決方案將無法工作（除非Open Sans本身存在問題，而不是它如何導入到項目中）。

更新：頁面確實有一些函數偵聽打印事件。具體來說，我使用FF和IE使用onbeforeprint和onafterprint，我使用Chrome的matchMedia。我仍在研究它們，但這似乎是不合理的，因爲這會延遲第一次處理CSS樣式和HTML元素，而不是後續時間。不過，我會繼續研究它。

來源

2015-10-28 jvdub

是否有一個元素，比如你隱藏/顯示的包含你的'h3'的div？ – NotJay

它幾乎看起來也許它是一個渲染問題，瀏覽器沒有及時繪製元素，你有沒有嘗試添加一個短暫的延遲？ – Adjit

我剛剛檢查了父'div'，並且他們沒有顯示/隱藏在任何時間。我會在印刷版上添加一小段延遲，看看是否有幫助。 – jvdub

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

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

出於某種原因，這些CSS規則得到及時處理，而有的則沒有。

來源

2016-02-25 21:39:07 jvdub

鉻未正確打印在首頁打印使用Open Sans字體

回答

相關問題