Question

我正在为某人更新网站，我正试图摆脱全局@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 s的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'。

pastebin of the entire CSS is here，如果您认为问题出在其他地方。我还创建了a jsfiddle with a fontface included以查看被忽略的示例。

旧更新 jsfiddle正在做它应该做的事情。我不知道我自己的代码有什么不同。

更新

我添加了违规规则。我想我缺少一些关于规则权重的东西，这就是为什么较低的规则仍然不会覆盖较高规则的原因。

Answer 1

这是一个优先问题。在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>

Answer 2

如需快速检查，您是否尝试过：

.header, .header *{
    font-family: neutra, Helvetica, Arial, Tahoma, Geneva, sans-serif;
}

由于您为许多代码指定了字体系列，因此首次设置可能过于“强大”。

Answer 3

您是否有可能使用html5 <header>元素并将css中元素的样式定义为.header {}（一个类）而不是header {}？

font-family规则被忽略

更新

3 个答案: