IE 11屏幕字体，打印媒体字体不起作用

Question

我们的新站点使用了谷歌的一些字体，最近我们发现，用OpenSansRegular和OpenSansSemibold两种字体打印页面有一个大问题。来自IE浏览器的HP LaserJet P3015上的示例页面打印出现49.4c02错误。这似乎(我谷歌了很多)，这个问题发生在大多数惠普激光打印机。我们的样式表中有大量对这些字体的调用，因此重写它们以使来自媒体查询的依赖关系成为一项艰巨的工作。所以我在寻找另一种选择:当我打印一个页面时，我想用Arial字体替换这些字体。我试过两种方法：

1)调用一个css。它包含以下代码：

@media screen {
    @font-face {
         font-family: OpenSansRegular;
         src: url(fonts/OpenSans-Regular-webfont.eot?#iefix) format("embedded-opentype"), url(fonts/OpenSans-Regular-webfont.woff) format("woff"), url(fonts/OpenSans-Regular-webfont.ttf) format("truetype"), url(fonts/OpenSans-Regular-webfont.svg#OpenSansRegular) format("svg");
         font-weight: normal;
         font-style: normal;
    }
}
@media print {
    @font-face {
        font-family: OpenSansRegular;
        src: local("Times New Roman");
        font-weight: normal;
        font-style: normal;
    }
}

注意:在媒体“打印”上，我使用的是本地字体"Times“，而不是目标"Arial”，因为它更容易检查差异，看它是否有效！

结果

• 好的，火狐，Chrome，Opera : OpenSansRegular在屏幕上使用，"Times“在打印预览版上使用
• KO与IE，Edge : OpenSansRegular没有加载，所以使用Arial。IE和Edge似乎不支持“媒体”中的“字体脸”。

2)使用链接上的media="print“加载替代字体：

<link href="screen_font.css" rel="stylesheet" type="text/css">
<link href="print_font.css" media="print" rel="stylesheet" type="text/css">

screen_font.css：

@font-face {
    font-family: OpenSansRegular;
    src: url(fonts/OpenSans-Regular-webfont.eot?#iefix) format("embedded-opentype"), url(fonts/OpenSans-Regular-webfont.woff) format("woff"), url(fonts/OpenSans-Regular-webfont.ttf) format("truetype"), url(fonts/OpenSans-Regular-webfont.svg#OpenSansRegular) format("svg");
    font-weight: normal;
    font-style: normal;
}

print_font.css：

@font-face {
    font-family: OpenSansRegular;
    src: local("Times New Roman");
    font-weight: normal;
    font-style: normal;
}

结果

• 好的，火狐，Chrome，Opera : OpenSansRegular在屏幕上使用，"Times“在打印预览版上使用
• KO与IE，Edge，“时代新罗马”是使用在屏幕和印刷媒体。它似乎是最后一个字体的声明，它是使用任何媒体定义。

这里有一个带有示例代码的zip文件：压缩文件

别再站在我这边了。任何帮助都将不胜感激..。

由于"Coop"，我们添加了以下媒体查询：

//IE10 and 11 hack
@media print and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    body * { font-family :Arial, sans-serif ; }
}
/* Windows 10 Edge Browser */
@media print and @supports (-ms-accelerator:true) {
    body * { font-family :Arial, sans-serif ; } 
}

我们的目标是IE，当然还有Microsoft。

Answer 1

我认为您确实会遇到一些问题，试图在@font-face查询中加载@media。我希望大多数人都会这样做，就是在媒体查询之外加载任何字体，这样它们就可以使用了。然后使用媒体查询应用正确的字体。例如：

@font-face {
  font-family: OpenSansRegular;
  src: url(fonts/OpenSans-Regular-webfont.eot?#iefix) format("embedded-opentype"), url(fonts/OpenSans-Regular-webfont.woff) format("woff"), url(fonts/OpenSans-Regular-webfont.ttf) format("truetype"), url(fonts/OpenSans-Regular-webfont.svg#OpenSansRegular) format("svg");
  font-weight: normal;
  font-style: normal; }

@media screen {
  body { font-family: OpenSansRegular; }
}

@media print {
  body { font-family: "Times New Roman"; }
}