IE11 @font-face 在@media 查询中使用时失败

Question

我在 IE11 中使用以下字体（从 MyFonts 下载）。当以以下方式指定时，它们会完美加载：

@import url("//hello.myfonts.net/count/myFId"); 
@font-face {font-family: 'HelveticaNeueLTStd-Lt'; src: url('webfonts/myFId_0_0.eot');src: url('webfonts/myFId_0_0.eot?#iefix') format('embedded-opentype'), url('webfonts/myFId_0_0.woff') format('woff'), url('webfonts/myFId_0_0.ttf') format('truetype');}   
@font-face {font-family: 'HelveticaNeueLTStd-Hv'; src: url('webfonts/myFId_1_0.eot');src: url('webfonts/myFId_1_0.eot?#iefix') format('embedded-opentype'), url('webfonts/myFId_1_0.woff') format('woff'), url('webfonts/myFId_1_0.ttf') format('truetype');}

但是，当在媒体查询中指定时，字体不会加载到 IE11（无论屏幕分辨率如何）。它只是使用 Times New Roman。

@import url("//hello.myfonts.net/count/myFId");
@media all and (min-width:800px) {
    @font-face {font-family: 'HelveticaNeueLTStd-Lt'; src: url('webfonts/myFId_0_0.eot');src: url('webfonts/myFId_0_0.eot?#iefix') format('embedded-opentype'), url('webfonts/myFId_0_0.woff') format('woff'), url('webfonts/myFId_0_0.ttf') format('truetype');}
    @font-face {font-family: 'HelveticaNeueLTStd-Hv'; src: url('webfonts/myFId_1_0.eot');src: url('webfonts/myFId_1_0.eot?#iefix') format('embedded-opentype'), url('webfonts/myFId_1_0.woff') format('woff'), url('webfonts/myFId_1_0.ttf') format('truetype');}
}

Firefox 和 Chrome 完美运行。任何地方都没有指定其他字体规则，所以它不是继承问题。

这是一个错误还是我在做一些愚蠢的事情？

我们的想法是假设便携式设备的连接速度较慢（例如，在移动设备时连接），因此我们跳过自定义字体并在这些情况下使用通用字体。

Answer 1

经过一些额外的研究，我找到了原因和解决方案。
原因是：

样式表中的@import 规则必须位于所有规则集之前。一个 遵循一个或多个规则集的@import 规则将被忽略。 Reference: SitePoint article

谢天谢地，这个解决方案既简单又好用。通过从样式表中删除媒体查询，并将其放在 HTML 参考中，我实现了这两个要求并删除了额外的 @import 规则：

<link rel="stylesheet" href="/css/fonts.css" media="(min-width:800px)" />

Answer 2

我会建议一种不同的方法...而不是在媒体查询中指定字体，我只会在媒体查询中调用字体...我相信这个问题是有效的，因为字体应该是全局的，而不是你只需在需要时调用字体...

@import url("//hello.myfonts.net/count/myFId"); 
@font-face {font-family: 'HelveticaNeueLTStd-Lt'; src: url('webfonts/myFId_0_0.eot');src: url('webfonts/myFId_0_0.eot?#iefix') format('embedded-opentype'), url('webfonts/myFId_0_0.woff') format('woff'), url('webfonts/myFId_0_0.ttf') format('truetype');}   
@font-face {font-family: 'HelveticaNeueLTStd-Hv'; src: url('webfonts/myFId_1_0.eot');src: url('webfonts/myFId_1_0.eot?#iefix') format('embedded-opentype'), url('webfonts/myFId_1_0.woff') format('woff'), url('webfonts/myFId_1_0.ttf') format('truetype');}

@media all and (min-width:800px) {
    div {
        font-family: 'HelveticaNeueLTStd-Lt';
    }
}