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

Answer 2

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

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

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

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

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

2 个答案: