Strange @font-face issue in IE11 (renders only after you inspect an element in developer tools)

问题

I have some web fonts that work correctly in all browsers except IE11. The strange thing is, if you go to this page: http://cscart.create26.com/index.php?dispatch=products.view&product_id=179 and then inspect the "features" bullet points with IE11 developer tools, suddenly all the fonts work. Any ideas?

@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');
  }
}

回答1:

Turns out I had a blank font-family declaration on the body tag. I must have forgotten to remove it when I was making some changes. Removing the blank "font-family: ;" fixed the issue.

回答2:

It works fine here. But if you check your developer tool's network tab, you'll see you're loading a lot of variations of the same font. In Chrome, you're loading both the WOFF and the SVG version of Helvetica Black Condensed, and the SVG, WOFF and TTF for Helvetica Condensed.

I figure improving your @font-face rule will reduce the chance of weird browser quirks.

回答3:

This is a little unrelated to the question but may help someone stumbling upon this post.

IE11 not printing web page. It turns out that CSS files that reference @font-face in them will result in IE11 printing to fail.

Tested and confirmed on Windows 7 Professional.

来源：https://stackoverflow.com/questions/22748573/strange-font-face-issue-in-ie11-renders-only-after-you-inspect-an-element-in-d