Почему "font-family" не наследуется в тегах "<button>" автоматически?

Я заметил, что в случае тегов <button> font-family не наследуется автоматически; либо я должен указать его явно:

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

или используйте свойство наследовать следующим образом:

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

Однако семейство шрифтов автоматически наследуется в случае других тегов, например тега <a>.

Почему у нас есть эта проблема с тегами <button>?

Здесь DEMO.

Ответ 1

Элементы формы не наследуют настройки шрифта, вы должны установить эти свойства вручную.

Если вы используете объявление шрифта для, например. тело,

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

использовать только

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

или же

input, textarea, button {font-family: inherit}

Ответ 2

Если вы проверите свою демонстрационную версию в браузере с помощью своих инструментов разработчика, вы увидите, что семейство шрифтов элемента button происходит из таблицы стилей браузера. Они показывают это по-разному, и они могут использовать разные шрифты там, но принцип один и тот же: есть объявление для свойства font-family элемента в некоторой таблице стилей, следовательно, это свойство не может быть унаследовано (если вы явно не задайте для него значение inherit, конечно).

Это не определено в спецификациях, но ни один из них не запрещает такие параметры таблицы стилей браузера, и они являются обычной практикой.

Ответ 3

Я знаю, что это старый вопрос, и я отвечаю поздно. И @panther, и @jukka-k-korpela правильно отвечают на вопрос. Тем не менее, им не хватает одной ключевой информации об исправлении для точного вопроса и демонстрации, предоставленной @nikunj-madhogaria. Я пытаюсь завершить ответ в соответствии с вопросом.

Поскольку вопрос касается тега button, вероятно, целесообразно добавить button в исправление CSS, предоставляемое @panther. Итак, вот правильное исправление для тега кнопки:

button { font-family: inherit }