CSS 使用字体的目的是什么：继承？

What is the purpose of using font: inherit?

提问by Soumya Rauth

I just wanted to know why font: inherit;is used in Cascading Style Sheets.

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

采纳答案by Konrad Rudolph

Like the other answers have said, it's to inherit a CSS property from the parent element.

就像其他答案所说的那样，它是从父元素继承 CSS 属性。

What the other answers have failed to say is why you'd need this. Because, after all, CSS properties are inherited anyway, right?

其他答案没有说的是为什么你需要 this。因为，毕竟 CSS 属性是继承的，对吧？

Well, no. Most are, by default (but link colour isn't inherited from the parent element, for instance). But consider this case:

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

p { color: blue; }

div.important { color: red; }

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

Now the text will be blue, not red. If we want the <p>to have its parent's styling rather than its default styling, we have to override its CSS. We could of course repeat the property value (red) but that violates DRY (don't repeat yourself). Instead, we inheritit:

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

div.important p { color: inherit; }

回答by Jukka K. Korpela

The declaration font:inheritis used in many “CSS Reset” stylesheets, which have often been copied into various libraries and frameworks. The original Reset CSSby Eric Meyer has font:inherit. No specific motivation is given. The overall rationale is said to be “to reduce browser inconsistencies in things like default line heights, margins and font sizes of headings, and so on”. But Meyer links to a previous postof his where he explains the idea, saying, among other things: “I want all this because I don't want to take style effects for granted. This serves two purposes. First, it makes me think just that little bit harder about the semantics of my document. With the reset in place, I don't pick strongbecause the design calls for boldfacing. Instead, I pick the right element—whether it's strongor emor bor h3or whatever—and then style it as needed.”

该声明font:inherit用于许多“CSS 重置”样式表，这些样式表经常被复制到各种库和框架中。Eric Meyer的原始重置 CSS具有font:inherit. 没有给出具体的动机。据说总体原理是“减少浏览器在默认行高、页边距和标题字体大小等方面的不一致”。但迈耶链接到他之前的一篇文章，他解释了这个想法，其中包括：“我想要这一切，因为我不想把风格效果视为理所当然。这有两个目的。首先，它让我更加难以思考我的文档的语义。重置到位后，我不选择strong因为设计要求加粗。相反，我会选择正确的元素——无论是strong或者em或者b或者h3或者其他什么——然后根据需要对其进行样式设置。”

Several HTML elements have a default rendering in browsers as regards to font properties: headings, form fields, table header cells, some phrase elements, etc. Using CSS Reset, or specifically font: inheritmeans that on browsers supporting the inheritvalue, all such elements are rendered in copy text font, unless otherwise specified in a style sheet.

关于字体属性，几个 HTML 元素在浏览器中具有默认呈现：标题、表单字段、表格标题单元格、一些短语元素等。使用 CSS 重置，或者特别font: inherit意味着在支持该inherit值的浏览器上，所有这些元素都呈现在复制文本字体，除非在样式表中另有规定。

So this is about a particular methodology (or, as some people might say, ideology or religion) of authoring and design. It has gained popularity and often applied routinely.

所以这是关于创作和设计的特定方法论（或者，正如某些人所说，意识形态或宗教）。它已广受欢迎并经常被常规应用。

回答by Mikko Rantalainen

Using {font:inherit;}in CSS makes sense because various user agents (a.k.a. browsers) have user agent stylesheet (read: default stylesheet) with something like

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

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

textarea, input
{
    font: monospace;
}

The {font:inherit;}is used to workaround the special case where fontor font-familyis not inherited by default due to user agent stylesheet but the author of the content wishes the font family to be inherited.

本{font:inherit;}是用来替代方案，在特殊情况下font或font-family默认情况下不继承由于用户代理样式表，但内容的作者希望的字体家族被继承。

The actual user agent behavior with the value inheritdiffers due to various bugs, unfortunately. Resulting behavior may be closer to author intent than the default value, though.

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

回答by Stickers

The fontCSS property is either a shorthand property for setting font-style, font-variant, font-weight, font-size, line-height, and font-family; or a way to set the element's font to a system font, using specific keywords. -MDN

的fontCSS属性是用于设置一个速记属性font-style，font-variant，font-weight，font-size，line-height，和font-family; 或者使用特定关键字将元素的字体设置为系统字体的方法。- MDN

By using font: inherit;, it tells an element to inherit those relevant values from its parent container. See the examples below:

通过使用font: inherit;，它告诉元素从其父容器继承这些相关值。请参阅以下示例：

In the 1st group:you can see there are some special style set by default from the browser, h1is bolder and larger it also inherits the relevant values from bodyautomatically. However, for the inputelement, it doesn't inherit any of those values, since it's a replaced element and serves its unique purpose.

在第一组中：您可以看到浏览器默认设置了一些特殊样式h1，越粗越大，它还body自动继承相关值。但是，对于该input元素，它不会继承任何这些值，因为它是一个被替换的元素并且服务于其独特的用途。

In the 2nd group:It forces those elements to inherit those values from bodyby using font: inherit;.

在第二组中：它强制这些元素body使用font: inherit;.

Now, you see what it does. It's entirely up to you when to use it, for instance you might want to use <h1>tag for the site logo in the home page, and you probably want to make it look no difference than it appears on other pages. And of course, it's commonly being used in CSS reset frameworks.

现在，您看到它的作用了。何时使用它完全取决于您，例如，您可能希望<h1>在主页中为站点徽标使用标记，并且您可能希望使其看起来与在其他页面上显示的没有区别。当然，它通常用于 CSS 重置框架。

body {
  font-family: "Comic Sans MS", "Comic Sans", cursive;
  font-style: italic;
}

.inherit {
  font: inherit;
}

<h1>Heading</h1>
<input type="button" value="Button">

<hr>

<h1 class="inherit">Heading</h1>
<input class="inherit" type="button" value="Button">

回答by Praveen Kumar Purushothaman

The inheritis used to get the properties from the parent element. In other words, inherit the properties of parent element.

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

The default property is inherit, it means, say you have divand a p.

默认属性是inherit，这意味着，假设您有div和p。

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

Now you give a style:

现在你给出一个样式：

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

That font-familyis inherited to the pfrom its parent element div.

这font-family是从其父元素inherited 到。pdiv

回答by cimmanon

Not all browsers inherit font properties on all elements. Netscape 4.x was notoriously bad about about inheritance. Consider the following style:

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

body { background: black; color: white }

In Netscape 4.x, the color was not applied to table elements, so you would end up with the default black text inside the table on a black background.

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

Font properties have the same kind of deal for some elements, particularly form elements (and table elements for older browsers). It's not uncommon to see a definition like this:

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

table, form { font: inherit }

回答by Mr. Alien

inheritin CSS simply means it inherits the values from parent element, so for example:

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

<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>

Here <p>inherits the font-family: Arial;from it's parent div

这里<p>继承了font-family: Arial;它的父级div

You need to use inherit for example in the case of anchor elements, the color property is commonly set to blue in the user agent style sheet. If you wanted to reinforce the importance of the inherited value, you could use the value inherit in an author or user style sheet, overwriting the user agent style sheet declaration.

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

More Reference

更多参考