Chrome 打印预览不加载 @media only print font-face

Posted 2023-03-06

【中文标题】Chrome 打印预览不加载 @media only print font-face

【英文标题】：Chrome Print Preview doesn't load @media only print font-face

【发布时间】：2017-01-14 19:28:49

【问题描述】：

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

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

有没有比强制为所有@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/

【参考方案1】：

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

【讨论】：

该解决方案有两个注意事项：1/ 如果您希望 Chrome 真正下载字体，则需要显示字体文本 2/ 这会增加所有“屏幕”页面的权重。跨度>

这救了我的头！我正在使用

仍然存在于版本 85.0.4183.83 中。正如您所描述的，第一次打印预览失败，随后的打印预览正确显示。花了我很多时间，感谢上帝，我找到了你的答案，挽救了我的理智。

【参考方案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;