Question

我想要一个不同的字体用于打印而不是用于屏幕。遗憾的是，Google Chrome打印预览（适用于其他浏览器）不会加载字体，也不会显示文字。但如果您再次尝试，则会加载font-face，然后Google Chrome打印预览会显示该文字！

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

是否有比为所有@media强制预加载print font-face更好的解决方案？

所有版本的Google Chrome都会出现问题＆lt; = 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似乎按需加载自定义字体＆＃39;。因此，如果该字体尚未在页面上使用，那么您的第一个＆＃39;打印预览＆＃39;没有它，后来的人会拥有它。可能是那里的时间问题。

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

@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

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

西里尔字母（由Open Sans支持）
Cyrillic Extended（由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 only print font-face

2 个答案: