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

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 最初的重置CSS有font:inherit.没有具体的动机.据说整体原理是"减少浏览器在默认行高,边距和标题字体大小等方面的不一致性".但Meyer链接到他之前的帖子,他解释了这个想法,并说:"我想要这一切,因为我不想把风格效果视为理所当然.这有两个目的.首先,它让我认为我的文档的语义稍微有些难度.由于重置到位,我不选择,strong因为设计要求加粗.相反,我选择正确的元素,无论是strong或em或b或h3或什么,然后根据需要设置样式".

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

因此,这是关于创作和设计的特定方法(或者,如某些人可能会说的,意识形态或宗教).它已经普及并经常应用.