Modernizr 无法正常工作（在 IE8 中应用 fontface 类）答案

【问题标题】：Modernizr not working properly (applying fontface class in IE8)Modernizr 无法正常工作（在 IE8 中应用 fontface 类）
【发布时间】：2014-03-22 17:26:32
【问题描述】：

嗯，我度过了一个充满乐趣的 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 元素应用 no-fontface 类）

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

为什么？

【问题讨论】：

标签： css font-face modernizr

【解决方案1】：

在 IE8 和任何不支持 @font-face 的浏览器中，您可能会看到 4px 的小字体大小。（在这种情况下，Modernizr 应该对 HTML 元素应用 no-fontface 类）

IE 8 确实支持@font-face - 所以希望Modernizer不设置该类正是你出错的地方。

警告是 IE

或者仅当您通过条件 cmets 为 html 元素设置的 lt-ie9 类不存在时，才使用应用自定义字体的 CSS 选择器，例如

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

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

【讨论】：

优秀的答案。值得注意的是，IE 发明了 font-face，并在 IE 4 中支持它
您，先生，简直就是传奇。如上所述，优秀，全面的答案。现在用一行代码解决了问题。非常感谢。