css - IE 11 - 屏幕字体、媒体类型的打印字体不起作用

Question

我们的新网站使用了 Google 的一些字体，我们最近发现使用 2 种字体打印页面存在一个大问题: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;
    }
}

注意:在媒体“print”上，我使用本地字体“Times New Roman”而不是目标“Arial”，因为它更容易检查差异并查看它是否有效!

结果

• 适用于 Firefox、Chrome、Opera:OpenSansRegular 用于 屏幕和打印预览上的“Times New Roman”
• 与 IE、Edge 的 KO:未加载 OpenSansRegular，因此使用 Arial。好像是IE和Edge 不支持@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">

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

打印字体.css:

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

结果

• 适用于 Firefox、Chrome、Opera:屏幕上使用 OpenSansRegular，打印预览上使用“Times New Roman”
• 与 IE、Edge 进行 KO，“Times New Roman”用于屏幕和打印媒体。看起来这是最后一个字体的声明，无论媒体定义如何，都会使用它。

这里是包含示例代码的 zip 文件:zip file

我这边没有更多的想法了。任何帮助将不胜感激...

感谢“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。

Answer 1

我认为您在尝试在 @media 查询中加载 @font-face 时确实可能会遇到问题。我希望大多数人这样做的方式是加载媒体查询之外的任何字体，以便它们可以使用。然后使用媒体查询应用正确的字体。例如:

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