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

Posted 2023-03-06

【中文标题】IE 11 - 屏幕字体、带有媒体类型的打印字体不起作用

【英文标题】：IE 11 - screen font, print font with media type don't work

【发布时间】：2015-12-20 11:52:17

【问题描述】：

我们的新网站使用了一些来自 Google 的字体，我们最近发现使用 2 种字体打印页面存在很大问题：OpenSansRegular 和 OpenSansSemibold。从 IE 浏览器在 HP LaserJet P3015 上打印的示例页面遇到 49.4c02 错误。似乎（我搜索了很多）这个问题出现在大多数 HP 激光打印机上。 在我们的样式表中有很多对这些字体的调用，因此重写它们以使媒体查询产生依赖关系将是一项艰巨的工作。 所以我正在寻找一种替代方法：当我打印页面时，我想用 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” 使用 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;

print_font.css：

@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、“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。

【问题讨论】：

如果你谷歌这个问题，你会在里面找到很多信息，甚至是解决方案。 （“媒体查询中的字体”）微软经常如实执行规范：in CSS2.1 @ rules are not allowed inside media queries and are therefore ignored。我一直在 CSS3 中寻找相同的信息，但似乎找不到。这个限制可能在 CSS3 中被取消了。

我用谷歌搜索了很多，并找到了相同的信息。

【参考方案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"; 

【讨论】：

谢谢，但正如我在帖子中所写的那样：“我们的样式表中有很多对这些字体的调用，所以重写它们以使媒体查询的依赖关系将是一项艰巨的工作。所以我”我正在寻找替代方案……”

我明白了。好吧，您可以尝试在打印媒体查询中使用body * font-family: "Times New Roman"; 之类的命令，这将强制所有元素使用 Times New Roman 进行打印。或者（这里可能不是一个合适的答案）我会亲自用 SASS 编写这样的样式表，这样您就可以更新单个变量而不是多个地方的字体