我正在为某人更新网站，我正试图摆脱全局 @font-face 并将其仅应用于特定元素。
它是这样定义的:
@font-face {
font-family: "neutra";
src: url( /styles/NeutraDisp-Bold.eot ); /* IE */
src: local("Neutra Display"), url( /styles/NeutraDisp-Bold.ttf ) format("truetype"); /* non-IE */
}
@font-face {
font-family: "futura";
src: url( /styles/FuturaStd-Heavy.eot ); /* IE */
src: local("Futura Std"), url( /styles/FuturaStd-Heavy.ttf ) format("truetype"); /* non-IE */
}
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
font-family: neutra, Arial, Helvetica, Tahoma, Geneva, sans-serif;
}
我只希望它出现在具有类 .header 和 legend(最终还有一些其他标签)的 div 上，所以我修改了 CSS 使其看起来像这代替:
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
font-family: Arial, Helvetica, Tahoma, Geneva, sans-serif;
}
@font-face {
font-family: "neutra";
src: url('../../styles/NeutraDisp-Bold.eot'); /* IE */
src: local("Neutra Display"), url('../../styles/NeutraDisp-Bold.ttf') format("truetype"); /* non-IE */
}
@font-face {
font-family: "futura";
src: url('../../styles/FuturaStd-Heavy.eot'); /* IE */
src: local("Futura Std"), url('../../styles/FuturaStd-Heavy.ttf') format("truetype"); /* non-IE */
}
legend{
font-family: neutra, Helvetica, Arial, sans-serif;
letter-spacing: .125em;
-webkit-border-radius: .5em;
-moz-border-radius: .5em;
border-radius: .5em;
}
.header{
width: 75em;
height: 12.375em;
background-color: #FFFFFF;
margin: auto;
font-family: neutra, Helvetica, Arial, Tahoma, Geneva, sans-serif;
}
但是，.header font-family 被忽略了。使用了该规则中的所有其他声明，并且 Firebug 显示了 font-family，这向我表明它是有效的 CSS。
此外，legend 规则完美运行，并显示正确的字体。
注意:开始工作时我移动了字体和其他各种东西，但我知道新的字体路径是正确的，因为 legend 规则有效。我也尝试过 "neutra" 和 'neutra'。
A pastebin of the entire CSS is here ，如果您认为问题出在其他地方。我还创建了 a jsfiddle with a fontface included查看它被忽略的示例。
旧更新 jsfiddle 正在做它应该做的事情。我不知道我自己的代码有什么不同。
更新
我已经添加了违规规则。我想我遗漏了一些关于规则权重的信息，这就是为什么较低的规则仍然没有覆盖较高的规则。
最佳答案
这是一个优先级问题。在 w3 上查看:
http://www.w3.org/TR/CSS2/cascade.html
将默认设置为 Arial 的第一条规则也直接将字体应用到大多数 html 元素。这是不必要的，会导致您的问题。相反，您应该只在顶级元素(如 html)上设置一次。
/* this single rule applies the Arial font to the whole document tree under <html> */
html { font-face: Arial, etc; }
/* this would set the font on .header, and everything inside of it */
.header { font-face: neutra, etc; }
在你的例子中，p { font-face: Arial; } 和 div { font-face: Arial; } 等打败了你单独嵌套的 .header 规则。如果您将那条长规则缩减为顶级元素，它将解决您的问题。
css 级联的小例子，带有原始的长规则声明:
<html>
<body>
My text is Arial because I exist under html and there are
no other rules modifying me.
<div class="header">
My text is neutra because I'm a direct child text node of "header"
<p>
my text is Arial because of the rule on "p", which in turn overrides
the rule on "header"
</p>
</div>
</body>
</html>
关于html - 忽略字体系列规则，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/7060734/