Chrome Print Preview doesn't load @media only print font
I would like a different font-face for print than for screen. Unfortunately Google Chrome Print Preview (works on other browsers) won't load the font-face and won't show the text. But if you try it a second time, the font-face is loaded and then, Google Chrome Print Preview will show the text!
Here is a fiddle on which you can reproduce the problem. (nb: on the fiddle the font url does not exist, but at least the preview should show the text as 'serif').
Is there a better solution than forcing the pre-loading of the print font-face for all @media?
The problems occurs on all versions of Google Chrome <= 53.
I used this code:
@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/
Just found this question via Google after we had just experienced the same problem. Sad to see 11 months gone by with no answer, so perhaps this will help you and others.
Chrome seems to load the custom font 'on-demand'. So, if the font isn't already used on the page, your first 'Print Preview' fails to have it yet, subsequent ones will have it. Likely a timing issue there.
One solution would be to make sure you also use the print font on the regular version of the page.
@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/
链接地址: http://www.djcxy.com/p/20498.html