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

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

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

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

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

在我们刚刚遇到同样的问题后，刚刚通过谷歌发现了这个问题。很遗憾看到 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/