字体族规则被忽略了。

Question

字体族规则被忽略了。

7

我正在更新某个网站，试图摆脱全局的@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（以及一些其他标记，最终）的

上添加它，因此我修改了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的pastebin，我也创建了包含fontface的jsfiddle，以查看它被忽略的示例。

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

更新我已经添加了冒犯的规则。我认为我错过了关于规则权重的一些东西，这就是为什么较低的规则仍然没有覆盖较高的规则的原因。

- rockerest

你能发布一下使用 .header 的 HTML 代码吗？或者如果可能的话，在 jsfiddle.net 上设置一个 fiddle？ - Russ Clarke

你是否尝试将头部元素放在不可接受的元素中？例如，我今天早些时候就犯了一个错误...我试图呈现<p><span style="somestuff"></span></p>，但它无法呈现 span 中的 CSS，因为当 span 放在 p 标签内时会变得“暴躁”...这可能与 header 嵌套的方式有关吗？ - Rikon

@Russ C：这是一个jsfiddle。请注意受控资源。 - rockerest

3

几乎每个元素都直接设置了字体，.header被嵌套的 div, p 等规则所覆盖。 - numbers1311407

不，最好还是在顶部某处定义它，比如在 html 上，然后你对 .header 的覆盖将优先生效。也就是说，不要使用那个长长的元素列表，而是简单地使用 html { font-face: whatev; }。 - numbers1311407

显示剩余3条评论

3个回答

3

做一个快速检查，您尝试过吗：

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

由于您为许多标记指定了字体系列，因此可能初始设置过于“强烈”。

- darma

我添加了.header *{}和font-family声明，它起作用了。为什么规则不会自动继承到.header的子元素中呢？这里有关于字体家族继承的一些问题没有被明确说明吗？ - rockerest

0

你是否有使用HTML5的<header>元素，并在CSS中将该元素的样式定义为.header {}（一个类），而不是header {}？

- Kelly Cook

没有，只是一个<div class="header"> :( - rockerest

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- numbers1311407 · Accepted Answer

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