Kích thước phông chữ phổ biến nhất cho thẻ H1-H6 là gì [đã đóng]

107

Tôi luôn không chắc nên bắt đầu từ đâu như một phương pháp cơ bản tốt nhất nói chung. Vâng, tôi biết nó phụ thuộc vào thiết kế của bạn - nhưng điều gì phổ biến nhất?

Đây là những gì tôi hiện có khi mới bắt đầu:

h1 { font-size: 24px;}
h2 { font-size: 22px;}
h3 { font-size: 18px;}
h4 { font-size: 16px;}
h5 { font-size: 12px;}
h6 { font-size: 10px;}

Có, chúng tôi không sử dụng EM ở công việc hiện tại của tôi.

Cảm ơn

html css frontend

— rsturim
nguồn

không nghĩ rằng đây là một câu hỏi thích hợp vì không có câu trả lời ..

— Treemonkey

Treemonkey, thật sao? Xin ý kiến có không ổn không?

— rsturim

Điều yêu thích của tôi là khi tôi google thứ gì đó, kết quả hàng đầu là một bài đăng trên StackOverflow và câu hỏi được đóng hoặc ở trạng thái chờ. Không có gì hoàn toàn giống như việc đóng gói kiến thức cũ kỹ để chịu đựng thử thách của thời gian.

— Kyle Kelley,

Không, @rsturim, hỏi ý kiến là không được đâu

— Liam

Tôi đã tìm kiếm một câu hỏi như thế này, vì vậy trong khi lạc đề cho ngăn xếp cụ thể này, tôi thấy nó hữu ích. Việc đóng câu hỏi này có nghĩa là không có cuộc đối thoại, tranh luận hoặc câu trả lời nào có thể được thêm vào, làm giảm giá trị của câu hỏi này đối với cộng đồng nói chung. Tôi đã thấy các câu hỏi lạc đề khác được chuyển sang các ngăn xếp phù hợp hơn. Điều này có thể được thực hiện cho câu hỏi này? Chúc mừng ~

— Pete

Câu trả lời:

213

Nó sẽ phụ thuộc vào biểu định kiểu mặc định của trình duyệt. Bạn có thể xem bảng (không chính thức) về các mặc định của biểu định kiểu Tác nhân Người dùng CSS2.1 tại đây .

Dựa trên trang được liệt kê ở trên, các kích thước mặc định trông giống như sau:

    IE7     IE8     FF2         FF3         Opera   Safari 3.1
H1  24pt    2em     32px        32px        32px    32px       
H2  18pt    1.5em   24px        24px        24px    24px
H3  13.55pt 1.17em  18.7333px   18.7167px   18px    19px
H4  n/a     n/a     n/a         n/a         n/a     n/a
H5  10pt    0.83em  13.2667px   13.2833px   13px    13px
H6  7.55pt  0.67em  10.7333px   10.7167px   10px    11px

Cũng đáng xem là biểu định kiểu mặc định cho HTML 4 . W3C khuyến nghị sử dụng các kiểu này làm mặc định. Một đoạn trích tóm tắt:

h1 { font-size: 2em; }
h2 { font-size: 1.5em; }
h3 { font-size: 1.17em; }
h4 { font-size: 1.12em; }
h5 { font-size: .83em; }
h6 { font-size: .75em; }

Hy vọng thông tin này là hữu ích.

— Bánh vòng
nguồn

Đề xuất HTML 4 cho H6 đã bị bỏ qua và 0,67em thắng; Ngày nay WebKit và FF sử dụng cùng emkích thước với IE8. w3.org/TR/html-markup/h6.html cũng cho biết hiển thị "điển hình" là 0,67em.

— Beni Cherniavsky-Paskin

Bất kỳ lý do nào đằng sau điều này hoặc một số người ngẫu nhiên đã từng nói "sẽ có tiêu đề ở các kích thước này"?

— rzb

Bạn nên cập nhật câu trả lời để bao gồm các mặc định HTML5.

— Moha con lạc đà toàn năng

Đây là trang HTML5 w3.org/TR/html5/rendering.html#section-and-headings

— Sirens

@ BeniCherniavsky-Paskinthe liên kết bị hỏng, bạn có thể đăng một cái mới được không?

— kuldeep

Các tiêu đề thường được in đậm; đã bị tắt cho phần trình diễn tương ứng kích thước này. MSIE và Opera diễn giải các kích thước này giống nhau, nhưng lưu ý rằng trình duyệt Gecko và Chrome diễn giải Tiêu đề 6 là 11 pixel thay vì 10 pixel / cỡ chữ 1 và Tiêu đề 3 là 19 pixel thay vì 18 pixel / cỡ chữ 4 (mặc dù rất khó cho biết sự khác biệt ngay cả khi so sánh trực tiếp và không thể sử dụng). Có vẻ như Gecko cũng giới hạn văn bản không nhỏ hơn 10 pixel.

— Sujit Agarwal
nguồn