Question

我注意到，如果是<button>个标签，则 font-family 不会自动继承;或者我必须明确指定它：

<button style="font-family: some_style;">Button</button>

或使用继承属性，如下所示：

<button style="font-family: inherit;">Button</button>

但是，对于其他标记，例如<a>标记， font-family 会自动继承。

为什么<button>代码存在此问题？

这是 DEMO 。

Answer 1

表单元素不继承字体设置，您必须手动设置这些属性。

如果您使用字体声明，例如。身体，

body {font-family: arial, sans-serif}

仅使用

body, input, textarea {font-family: arial, sans-serif}

或

input, textarea {font-family: inherit}

Answer 2

如果您使用其开发者工具在浏览器中检查您的演示，您可以看到button元素的字体系列来自浏览器样式表。它们以不同的方式显示它们，并且它们可能在那里使用不同的字体，但原理是相同的：在某些样式表中有元素的font-family属性的声明，因此该属性不能被继承（除非你在其上明确设置值inherit）。

这在规范中没有定义，但它们都不禁止这样的浏览器样式表设置，并且它们是常见的做法。

Answer 3

我知道这是一个老问题，我迟到了。 @panther和@ jukka-k-korpela都正确回答了这个问题。但是，他们缺少有关@ nikunj-madhogaria提供的精确问题解决方案和演示的重要信息。我试图根据问题来回答。

由于问题是关于button标记的，因此将button添加到@panther提供的CSS修订可能是明智的。因此，这是按钮标签的正确解决方法：

button { font-family: inherit }

Answer 4

旧回复，但它可能对某些人有所帮助。我添加了以下内容：

* {
     font-family: arial, sans-serif
}

为什么'font-family'不会自动在'<button>'标签中继承？</button>

4 个答案: