Css IE 11-屏幕字体，媒体类型为don'的打印字体；行不通

我们的新网站使用谷歌的一些字体，我们最近发现用两种字体打印页面有一个大问题：OpenSansRegular和OpenSansSemibold。从IE浏览器在HP LaserJet P3015上打印的示例页面出现49.4c02错误。似乎（我在谷歌上搜索了很多）大多数HP laserjet打印机都出现了这个问题。 在我们的样式表中有很多对这些字体的调用，因此重写它们以从媒体查询中生成依赖项将是一项艰巨的工作。 所以我在寻找一种替代方法：当我打印页面时，我想用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 New Roman”，而不是目标字体“Arial”，因为它更容易检查差异并查看是否有效

结果

• 可以使用Firefox、Chrome、Opera:OpenSansRegular用于 屏幕和打印预览上的“Times New Roman”
• KO与IE，Edge:OpenSansRegular未加载，因此使用Arial。它看起来像是一把利刃 在@media中不支持@font-face

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">

打印字体.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;
}

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

结果

• Firefox、Chrome、Opera都可以：屏幕上使用OpenSansRegular，打印预览中使用“Times New Roman”
• 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 Edge。

我认为您在加载

@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"; }
}

---

谢谢，但正如我在我的帖子中所写：“在我们的样式表中有很多对这些字体的调用，因此重写它们以从媒体查询中生成依赖项将是一项艰巨的工作。因此我正在寻找替代方案……”我明白了。您可以尝试在打印媒体查询中使用类似于

body*{font-family:“Times New Roman”}

的命令，这将强制所有元素使用Times New Roman进行打印。或者（这里可能不是一个合适的答案）我个人会用SASS写一个这样的样式表，这样你可以在多个地方更新单个变量而不是字体。如果你用谷歌搜索这个问题，你会在其中找到很多信息，甚至解决方案。（“媒体查询中的字体”）通常情况下，Microsoft会如实地执行规范：。我一直在CSS3中寻找相同的信息，但似乎找不到。有可能CSS3已经取消了这一限制。我在谷歌搜索了很多次，发现了同样的信息。