字体系列规则被忽略答案

【问题标题】：font-family rule is ignored字体系列规则被忽略
【发布时间】：2011-11-14 07:44:07
【问题描述】：

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

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

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

更新

我添加了违规规则。我想我遗漏了一些关于规则权重的东西，这就是为什么较低的规则仍然没有覆盖较高的规则。

【问题讨论】：

你能贴出使用 .header 的 html 吗？或者如果可能的话，在 jsfiddle.net 上设置一个小提琴？
您是否有可能尝试将标题元素放在不可接受的元素中...例如，我今天早些时候用这个来欺骗自己...我试图渲染
并且它不会在跨度中呈现 css，因为跨度在放入 p 标签时会变得“脾气暴躁”......这可能是标题的方式吗嵌套？
@Russ C：这是jsfiddle。注意托管资源。
字体几乎直接设置在每个元素上，.header 被嵌套div、p 等规则击败。
@numbers1311407 你是说你必须为每个元素显式定义font-family，即使它的父元素已经定义了？

标签： html css fonts

【解决方案1】：

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

【讨论】：

长规则是一个重置，但我已经删除了 font-family 声明并将其添加到它自己的规则中——仅在 html 上。这解决了我的问题。感谢您解释为什么会发生这种情况。
为确保您的重置继续按预期工作，您可能需要替换规则 font: inherit，这是重置的典型规则。
这不是特异性问题，而是继承问题。
编辑优先。我一直认为继承是特异性计算的一部分。

【解决方案2】：

为了快速检查，您尝试过吗：

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

由于您要为很多标签指定字体系列，所以第一次设置可能过于“强大”。

【讨论】：

我在font-family 声明中添加了.header *{}，它起作用了。为什么.header 的孩子没有自动继承规则？有没有关于字体家族继承的东西在这里没有说清楚？

【解决方案3】：

您是否有机会使用 html5 <header> 元素并将 CSS 中元素的样式定义为 .header {}（类）而不是 header {}？

【讨论】：

不，只是一个<div class="header"> :(