Chrome打印预览不会加载@media仅打印字体

Question

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

这是一个小提琴，您可以重现该问题。（nb：在小提琴上，字体网址不存在，但至少预览应将文本显示为“ serif”）。

是否有比为所有@media强制预加载打印字体更好的解决方案？

在所有版本小于等于53的Google Chrome浏览器中都会出现此问题。

我使用以下代码：

@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

在我们遇到同样的问题之后，才通过Google找到了这个问题。悲伤，就见第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/

Answer 2

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

\n\n

现在，您需要确保在使用 print 之前渲染了打印字体，并且您要渲染每个要打印的语言组中的至少 1 个字符：

\n\n

\n
• 西里尔字母（由 Open Sans 支持）
\n
• 西里尔字母扩展（由 Open Sans 支持）
\n
• 希腊语（由 Open Sans 支持）
\n
• 希腊语扩展（由 Open Sans 支持）
\n
• 拉丁语（所有字体都支持）
\n
• 拉丁文扩展（由 Open Sans 支持）
\n
• 越南语（由 Open Sans 支持）
\n

\n\n

现在我添加拉丁扩展字符

\n\n

<div class="chrome-font-fix">s\xc5\xa1<b>s\xc5\xa1</b><i>s\xc5\xa1</i></div>\n

\n\n

隐形风格

\n\n

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

\n