Question

我只是想知道为什么在层叠样式表中使用font: inherit;。

Answer 1

与其他答案一样，它是从父元素继承CSS属性。

其他答案未能说明的是为什么你需要这个。毕竟，无论如何，CSS属性都是继承的，对吗？

嗯，不。默认情况下，大多数是（但链接颜色不是从父元素继承的）。但请考虑这种情况：

p { color: blue; }

div.important { color: red; }

<div class="important">
    <p>This is a text</p>
</div>

现在文字是蓝色，而不是红色。如果我们希望<p>具有其父级样式而不是其默认样式，我们必须覆盖其CSS。我们当然可以重复属性值（red），但这会违反DRY（不要重复自己）。相反，我们继承它：

div.important p { color: inherit; }

Answer 2

声明font:inherit用于许多“CSS重置”样式表，这些样式表经常被复制到各种库和框架中。 Eric Meyer的原始Reset CSS已font:inherit。没有具体的动机。据说整体原理是“减少浏览器在默认行高，边距和标题字体大小等方面的不一致性”。但Meyer链接到他的previous post他解释这个想法的地方，除其他外说：“我想要这一切，因为我不想把风格效果视为理所当然。这有两个目的。首先，它让我认为我的文档的语义稍微有些难度。复位到位后，我不选择strong，因为设计要求加粗。相反，我选择正确的元素 - 无论是strong还是em还是b或h3还是其他 - 然后根据需要设置样式。“

在浏览器中，有几个HTML元素在字体属性方面有默认呈现：标题，表单字段，表格标题单元格，一些短语元素等。使用CSS重置，或者特别是font: inherit表示在支持inherit值，所有这些元素都以复制文本字体呈现，除非在样式表中另有说明。

所以这是关于创作和设计的特定方法（或者，正如某些人可能会说的，意识形态或宗教）。它已经普及并经常应用。

Answer 3

inherit用于从父元素获取属性。换句话说，继承父元素的属性。

默认属性为inherit，表示您拥有div和p。

<div>
    <p>Hello World!</p>
</div>

现在你给出一种风格：

div {font-famlily: Tahoma;}
p {font-family: inherit;}

font-family inherit p来自其父元素div的{{1}}。

Answer 4

并非所有浏览器都在所有元素上继承字体属性。关于继承，Netscape 4.x出了名的糟糕。请考虑以下样式：

body { background: black; color: white }

在Netscape 4.x中，颜色未应用于表格元素，因此您最终会在黑色背景上的表格中使用默认的黑色文字。

字体属性对某些元素具有相同的处理方式，特别是表单元素（以及旧浏览器的表元素）。看到这样的定义并不罕见：

table, form { font: inherit }

Answer 5

在CSS中使用{font:inherit;}是有道理的，因为各种用户代理（a.k.a.浏览器）都有用户代理样式表（读取：默认样式表），类似于

body
{
    font: -magic-font-from-user-preferences;
}

textarea, input
{
    font: monospace;
}

{font:inherit;}用于解决由于用户代理样式表而默认不继承font或font-family的特殊情况，但内容的作者希望字体系列为继承的。

遗憾的是，由于各种错误，值inherit的实际用户代理行为会有所不同。但是，结果行为可能比默认值更接近作者意图。

Answer 6

CSS中的

inherit只是意味着它继承了父元素的值，例如：

<div style="font-family: Arial;">
   <p style="font-family: inherit; /* This will inherit the font-family of the parent p*/">
      This text will be Arial..And inherit is default behavior of the browser
   </p>
</div>

此处<p>从其父font-family: Arial;继承div

例如，在锚元素的情况下，你需要使用inherit， color属性通常在用户代理样式中设置为蓝色片。如果你想强化继承的重要性值，您可以使用作者或用户样式中的值inherit 表，覆盖用户代理样式表声明。

More Reference

Answer 7

font CSS属性是用于设置font-style，font-variant，font-weight，font-size，line-height和{ {1}}；或使用特定关键字将元素的字体设置为系统字体的方法。 -MDN

通过使用font-family，它告诉元素从其父容器继承那些相关值。请参见以下示例：

在第一组中：，您可以看到浏览器默认设置了一些特殊样式，font: inherit;更大胆且更大，它还继承了{{1} }自动。但是，对于h1元素，它不继承任何这些值，因为它是一个已替换的元素，并且具有其独特的用途。

在第二个组中：：它强制这些元素通过使用body从input继承那些值。

现在，您看到了它的作用。何时使用它完全取决于您，例如，您可能想在首页中的站点徽标上使用body标签，并且可能希望使其与其他页面上的外观没有区别。当然，它通常在CSS重置框架中使用。

font: inherit;

<h1>

使用font的目的是什么：inherit？

7 个答案: