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标签上有一个空白的字体系列声明。当我做一些改变时，我一定忘记删除它。删除空白＆＃34; font-family：;＆＃34;解决了这个问题。

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上经过测试和确认。

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

3 个答案: