Chrome打印预览不会加载@media only打印字体 [英] Chrome Print Preview doesn't load @media only print font-face

问题描述

我希望打印的字体与屏幕的字体不同.不幸的是，Google Chrome打印预览(可在其他浏览器上运行)不会加载字体，也不会显示文本.但是，如果您第二次尝试，则会加载字体，然后Google Chrome打印预览将显示文本！

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!

在这里您可以重现问题.(注:小提琴上的字体网址不存在，但至少预览应将文本显示为"serif".​​)

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').

有没有比对所有@media强制预加载打印字体更好的解决方案?

Is there a better solution than forcing the pre-loading of the print font-face for all @media?

所有版本的Chrome浏览器(< = 53)都会出现问题.

The problems occurs on all versions of Google Chrome <= 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/

推荐答案

这里有一个问题 https://bugs.chromium.org/p/chromium/issues/detail?id = 284840

目前，您需要确保在使用打印之前已渲染了已打印的字体，并且要从每个要打印的语言组中至少渲染一个字符:

For now you need to sure there is printed font rendered before using print and you render at least 1 character from every language group you want to print:

• 西里尔字母(由Open Sans支持)
• Cyrillic Extended(由Open Sans支持)
• 希腊语(由Open Sans支持)
• 希腊语扩展(由Open Sans支持)
• 拉丁语(所有字体均支持)
• 拉丁扩展(由Open Sans支持)
• 越南语(由Open Sans支持)

现在我添加拉丁扩展字符

For now I add characters from Latin extended

<div class="chrome-font-fix">sš<b>sš</b><i>sš</i></div>

具有隐形样式

.chrome-font-fix {
    position: absolute;
    visibility: hidden;
}

这篇关于Chrome打印预览不会加载@media only打印字体的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！