为什么在这个按钮中，字体族不会正确地层叠？

Question

为什么在这个按钮中，字体族不会正确地层叠？

6

这是链接：

第一个CSS规则将字体族设置为'Helvetica Neue'，Helvetica，Arial，sans-serif;，在下面的CSS中，所有其他字体设置都简单地声明为 'inherit'。然而，在Chrome 21中，我得到的计算字体族是“Times”，在Firefox中，我得到的是'serif'。我错过了什么吗？

谢谢！

- stupidkid

请注意，initial应该像inherit一样独立存在，因此您不能在背景属性中使用initial initial。 - BoltClock

2个回答

0

这里：http://jsfiddle.net/LDEt6/6/

在大量的选择器中，您重新声明了body为font: inherit。

- Whymarrh

OPзҡ„й—®йўҳжҳҜдёәд»Җд№Ҳinput, buttonйҖүжӢ©еҷЁжІЎжңүз»§жүҝиҮӘbodyгҖӮ - Blender

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

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

- Alex Wayne · Accepted Answer

首先，我们有：

body {
     font-family : 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

很好，那就来吧。但是我们还有以下内容：

html, body, input, button, <snipped...> {
     font: inherit;
}

因为这个规则也适用于body，所以font被覆盖了，现在是inherit。

inherit是什么意思？它表示“使用分配给我的父元素的样式属性”。在这种情况下，<body>元素的父级是没有父级的<html>。所以根本没有指定字体系列，因此没有东西可以继承。

inherit不会使用先前定义的该元素的值。它是从父元素继承的，而不是应用于先前样式的值。inherit关注的是HTML结构，而不是CSS结构。

最终，您将整个宇宙设置为从其父级继承字体，包括所有父级。因此，您实际上永远找不到具有真实设置字体的父级。相反，浏览器应用其默认字体，只是为了呈现某些内容。

如果将body字体规则移到后面的重置规则之后，它就应该开始工作了。字体将一直继承到body标签，该标签现在具有真实字体。