首页 文章

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

提问于
浏览 次
2

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

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

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

所有版本的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/

css google-chrome media-queries font-face

2 回答

  • 5

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

    现在，您需要确保在使用打印之前呈现打印字体，并且您要从要打印的每个语言组中呈现至少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;
}
    回复于
  • 2

    我们刚遇到同样的问题后，才通过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/

    回复于

相关问题