IE11中的奇怪@ font-face问题（仅在检查开发人员工具中的元素后呈现）

Question

我有一些网络字体在IE11以外的所有浏览器中都能正常工作。 奇怪的是，如果你转到这个页面： http ：//cscart.create26.com/index.php？dispatch = products.view＆product_id = 179然后用IE11开发者工具检查“功能”要点，突然间全部字体工作。 有任何想法吗？

@font-face {
    font-family: 'Helvetica-Condensed-Black';
    src: url('../media/fonts/helvetica-condensed-black-webfont.eot');
    src: url('../media/fonts/helvetica-condensed-black-webfont.eot?#iefix') format('embedded-opentype'),
         url('../media/fonts/helvetica-condensed-black-webfont.woff') format('woff'),
         url('../media/fonts/helvetica-condensed-black-webfont.ttf') format('truetype'),
         url('../media/fonts/helvetica-condensed-black-webfont.svg#helvetica-condensed-black-sRg') format('svg');
    font-weight: normal;
    font-style: normal;
}
@media screen and (-webkit-min-device-pixel-ratio:0) {
  @font-face {
    font-family: 'Helvetica-Condensed-Black';
    src: url('../media/fonts/helvetica-condensed-black-webfont.svg#helvetica-condensed-black-sRg') format('svg');
  }
}

Answer 1

结果我在body标签上有一个空白的字体系列声明。 当我做一些改变时，我一定忘记删除它。 删除空白“font-family：;” 解决了这个问题。

Answer 2

它在这里工作正常。 但是，如果您检查开发人员工具的网络选项卡，您会看到正在加载相同字体的许多变体。 在Chrome中，您既可以加载Helvetica Black Condensed的WOFF和SVG版本，也可以加载Helvetica Condensed的SVG，WOFF 和 TTF。

我认为改进你的@font-face规则将减少奇怪的浏览器怪癖的机会。

Answer 3

这与这个问题有点无关，但可能有助于某人绊倒这篇文章。

IE11不打印网页。 事实证明，引用@ font-face的CSS文件会导致IE11打印失败。

在Windows 7 Professional上经过测试和确认。