Perché la "famiglia di caratteri" non è stata ereditata automaticamente nei tag "<button>"?

Question

Ho notato che in caso di tag <button>, la famiglia di font non viene ereditata automaticamente; o devo specificare che piace in modo esplicito:

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

o utilizzare ereditare proprietà come questa:

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

Tuttavia, il font-family è ereditato automaticamente in caso di altri tag, il <a> tag per esempio.

Perché abbiamo questo problema con i tag <button>?

Ecco uno DEMO.

Answer 1

Elemento modulo non ereditare le impostazioni del carattere, è necessario impostare manualmente queste proprietà.

Se si utilizza la dichiarazione del font per es. corpo,

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

uso solo

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

o

input, textarea {font-family: inherit} 

Answer 2

Se si controlla il vostro demo in un browser usando i suoi strumenti di sviluppo, si può vedere che la famiglia di font dell'elemento button viene dal foglio di stile del browser . Lo mostrano in diversi modi, e possono utilizzare diversi tipi di carattere, ma il principio è lo stesso: esiste una dichiarazione per la proprietà font-family dell'elemento in un foglio di stile, quindi la proprietà non può essere ereditata (a meno che non sia esplicitamente impostare il valore inherit su di esso, ovviamente).

Questo non è definito nelle specifiche, ma nemmeno tali impostazioni del foglio di stile del browser sono proibite da loro e sono pratica comune.