css - Modernizr 无法正常工作(在 IE8 中应用字体类)

Question

好吧，我度过了充满乐趣的 24 小时。自从昨天问这个问题:http://tinyurl.com/nkoqxfg我一直在努力找出问题所在，最后将范围缩小到以下几点:

Modernizr 错误地将一类字体应用于 IE8 中的 HTML 元素。

这是我的网站，其他所有内容都被删除了:http://tinyurl.com/ose6pj8

请查看源代码。注意最后两条 CSS 规则:

nav li a {
  color: #FFF;
  font-size: 4px;
}   

.fontface nav li a {
  font-family: 'Qwigley';
  font-size: 30px;
  line-height: 56px;
}

在任何支持@font-face 的现代浏览器中，您应该会看到使用 Google 字体的“Qwigly”脚本设置样式的菜单，以及正确的 30 像素字体大小。在 IE8 和任何不支持@font-face 的浏览器中，您会期望看到 4px 的微小字体大小。 (在这种情况下，Modernizr 应该将无字体类应用于 HTML 元素)

然而，事实并非如此。 Mordernizr 错误地应用了 fontface 类，结果我得到了巨大的 30px Arial 文本。刚查了一下，IE7也出现了同样的问题。

为什么？

Answer 1

in IE8 and any browser that doesn't support @font-face, you would expect to see a tiny font-size of 4px. (Modernizr in this case should apply a no-fontface class to the HTML element)

IE 8 确实支持@font-face——所以希望 Modernizer 不设置那个类正是你要去的地方此处错误。

警告 是 IE < 9 仅支持 EOT 格式的字体——因此请务必将该版本也嵌入到字体嵌入中；

或者使用 CSS 选择器，仅当您通过条件注释为 html 元素设置的 lt-ie9 类不是 现在，类似的东西

html:not(.lt-ie9) .fontface nav li a { /* … */ }

(从 v9 开始，IE 只支持 :not() 选择器。)