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

Question

我想要打印字体与屏幕字体不同。不幸的是 Google Chrome 打印预览（适用于其他浏览器）不会加载字体，也不会显示文本。但是如果你再试一次，字体会加载，然后 Google Chrome 打印预览会显示文本！

这是一个 fiddle，您可以在上面重现该问题。（注意：在 fiddle 上，字体 url 不存在，但至少预览应该将文本显示为 'serif'）。

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

问题出现在 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/

Answer 1

刚遇到同样的问题后，通过Google发现了这个问题。很遗憾地看到 11 个月过去了，没有任何答案，所以也许这会对你和其他人有所帮助。

Chrome 似乎加载了自定义字体 'on-demand'。因此，如果该字体尚未在页面上使用，则您的第一个 'Print Preview' 还没有它，后续的将有它。可能是时间问题。

一个解决方案是确保您也在常规版本的页面上使用打印字体。

@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

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

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

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

现在我从拉丁语扩展中添加字符

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

隐形风格

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

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

Chrome Print Preview doesn't load @media only print font-face

css

google-chrome

font-face

media-queries