Chrome打印預覽不加載@media只打印font-face

Question

我想要一個不同的字體打印比屏幕。 不幸的是，Google Chrome瀏覽器預覽（適用於其他瀏覽器）不會加載字體，並且不會顯示文字。 但是，如果您再次嘗試，則會加載字體，然後Google Chrome打印預覽會顯示文本！

這裏是你可以重現問題的小提琴。 （nb：在小提琴中字體url不存在，但至少預覽應該顯示文字爲'serif'）。

是否有比強制爲所有@media預加載print font-face更好的解決方案？

的問題發生在谷歌瀏覽器< = 53

所有版本我用這個代碼：

@media only print { 
    @font-face { 
     font-family: "Computer Modern"; 
     src: url('/fonts/cm/cmunrm.otf'); 
     font-weight: normal; 
     font-style: normal; 
    } 

    body { 
     font-family: "Computer Modern", serif; 
    } 
} 

https://jsfiddle.net/72bsf1n0/

Answer 1

通過谷歌剛剛發現這個問題後，我們剛剛經歷的同樣的問題。很遺憾看到11個月沒有回答，所以也許這會幫助你和其他人。

Chrome似乎加載了自定義字體'按需'。所以，如果字體還沒有在頁面上使用，你的第一個「打印預覽」還沒有使用它，後續的將會有它。那裏可能有時間問題。

一個解決方案是確保您也使用常規版本的頁面上的打印字體。

@font-face { 
    font-family: "Computer Modern"; 
    src: url('/fonts/cm/cmunrm.otf'); 
    font-weight: normal; 
    font-style: normal; 
} 

@media only print { 
    body { 
     font-family: "Computer Modern", serif; 
    } 
} 

.printfont { 
    font-family: "Computer Modern", serif; 
} 

https://jsfiddle.net/72bsf1n0/8/