我正在为某人更新网站,我正试图摆脱全局@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和legends(以及最终的一些其他标签)的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'.
一对的引擎收录整个 CSS在这里,如果你认为这个问题是其他地方.我还创建了一个包含字体的jsfiddle,以查看它被忽略的示例.
旧更新 jsfiddle正在做它应该做的事情.我不知道我自己的代码有什么不同.
我添加了违规规则.我想我缺少一些关于规则权重的东西,这就是为什么较低的规则仍然不会覆盖较高的规则.
这是一个优先问题.请在w3上查看:http:
//www.w3.org/TR/CSS2/cascade.html
将默认设置为Arial的第一个规则也直接将font-face应用于大多数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>