Chrome Print Preview不加载@media只有打印字体

我想要一个不同的字体，而不是屏幕。 不幸的是，Google Chrome浏览器预览（适用于其他浏览器）不会加载字体，并且不会显示文字。 但如果您再次尝试，则会加载字体，然后Google Chrome Print Preview将显示文本！

这里是你可以重现问题的小提琴。 （nb：在小提琴中字体url不存在，但至少预览应该显示文字为'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/

---

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

链接地址: http://www.djcxy.com/p/20497.html

上一篇: Chrome Print Preview doesn't load @media only print font

下一篇: Chrome print and print media emulation