Font-Size cho Button và Link

Question

tôi đã cố gắng html đơn giản này:

TEST FONT SIZE</br> 
<input type="button" value="test bytton" style="font-size:20px"> 
<a style="font-size:20px">test link</a> 

và phát hiện ra rằng kích thước phông chữ của nút này trông lớn hơn kích thước phông chữ của liên kết mặc dù phong cách. Có ai biết tại sao phong cách hoạt động khác nhau đối với liên kết và nút và cách làm cho chúng trông giống nhau không?

Answer 1

Kích thước phông chữ giống nhau. Nhưng nó trông khác nhau vì phông chữ trang mặc định khác với phông chữ trường nhập mặc định. Đặt font-family trên cả hai phần tử giống nhau và chúng trông giống nhau.

tôi thường làm:

body, input, button, select, option, textarea { 
    font-family: ...; /* whatever font */ 
} 
body { 
    font-size: x%; /* whatever base font size I want */ 
} 
input, button, select, option, textarea { 
    font-size: 100%; 
} 

để có được phông chữ phù hợp trên các lĩnh vực trang và hình thức.

Answer 2

Bạn không nên sử dụng nhiều CSS cho các nút, vì màn hình của chúng phụ thuộc vào hệ điều hành của người dùng.

Thay vào đó bạn có thể sử dụng cho các hình ảnh ví dụ.

Answer 3

Trông giống với tôi, thử nghiệm trên Firefox, IE6 và Chrome: http://jsbin.com/oveze
Hãy ghi nhớ:

• này phụ thuộc vào trình duyệt và giá trị mặc định của nó, và cũng có thể khác nhau tùy thuộc vào điều hành hệ thống.
• Rất thường có một phông chữ khác nhau cho các nút và các trường nhập. Đặt nó quá.
• Chống răng cưa hoặc ClearType có thể gây ra sự khác biệt nhỏ khi bạn không có cùng màu (nền và phông chữ).

Answer 4

Đã cùng một vấn đề trong Chrome, sau đó đã tìm ra rằng nguyên nhân chính là

body { 
    -webkit-font-smoothing: antialiased 
} 

thay đổi này để

body { 
    -webkit-font-smoothing: subpixel-antialiased; 
} 

cố định nó.