Tại sao 'họ phông chữ' không được kế thừa tự động trong thẻ '<button>'?

Question

Tôi nhận thấy rằng trong trường hợp các thẻ <button>, phông chữ-gia đình không được kế thừa tự động; hoặc là tôi phải xác định nó một cách rõ ràng thích:

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

hoặc sử dụng kế thừa bất động sản như thế này:

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

Tuy nhiên, font-family được tự động di truyền trong trường hợp thẻ khác, <a> ví dụ:

Tại sao chúng tôi gặp sự cố này với các thẻ <button>?

Đây là DEMO.

Answer 1

Phần tử biểu mẫu không kế thừa cài đặt phông chữ, bạn phải đặt thuộc tính này theo cách thủ công.

Nếu bạn sử dụng khai báo phông chữ cho ví dụ. cơ thể,

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

sử dụng chỉ

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

hoặc

input, textarea {font-family: inherit} 

Answer 2

Nếu bạn kiểm tra bản demo của bạn trong một trình duyệt sử dụng Công cụ nhà phát triển của nó, bạn có thể thấy rằng họ phông chữ của phần tử button xuất phát từ tờ kiểu trình duyệt . Chúng hiển thị theo nhiều cách khác nhau và chúng có thể sử dụng các phông chữ khác nhau ở đó, nhưng nguyên tắc giống nhau: có khai báo thuộc tính font-family của phần tử trong một số kiểu trang, do đó thuộc tính đó không thể được kế thừa (trừ khi bạn rõ ràng đặt giá trị inherit trên đó, tất nhiên).

Điều này không được xác định trong thông số kỹ thuật, nhưng không phải là cài đặt trang kiểu trình duyệt như vậy bị cấm và chúng là thực tiễn phổ biến.