ขนาดแบบอักษรที่ใช้บ่อยที่สุดสำหรับแท็ก H1-H6 [ปิด] คืออะไร

ฉันไม่แน่ใจมาตลอดว่าจะเริ่มจากจุดใดเพื่อเป็นแนวทางปฏิบัติที่ดีที่สุดทั่วไป ใช่ฉันรู้ว่ามันขึ้นอยู่กับการออกแบบของคุณ - แต่อะไรที่พบบ่อยที่สุด?

นี่คือสิ่งที่ฉันมีในตอนนี้ในฐานะผู้เริ่มต้น:

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

ใช่เราไม่ได้ใช้ EM ในงานปัจจุบันของฉัน

ขอบคุณ

มันจะขึ้นอยู่กับสไตล์ชีตเริ่มต้นของเบราว์เซอร์ คุณสามารถดู (อย่างไม่เป็นทางการ) ตาราง CSS2.1 ผู้ใช้ค่าเริ่มต้นตัวแทนสไตล์ชีตที่นี่

จากหน้าที่ระบุไว้ด้านบนขนาดเริ่มต้นจะมีลักษณะดังนี้:

    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

นอกจากนี้มูลค่าการดูที่เป็นสไตล์ชีทเริ่มต้นสำหรับ HTML 4 W3C แนะนำให้ใช้สไตล์เหล่านี้เป็นค่าเริ่มต้น ข้อความที่ตัดตอนมาโดยย่อ:

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; }

หวังว่าข้อมูลนี้จะเป็นประโยชน์.

โดยปกติหัวเรื่องมักจะเป็นตัวหนา ที่ถูกปิดสำหรับการสาธิตการรองรับขนาดนี้ MSIE และ Opera ตีความขนาดเหล่านี้เหมือนกัน แต่โปรดทราบว่าเบราว์เซอร์ Gecko และ Chrome ตีความ Heading 6 เป็น 11 พิกเซลแทนที่จะเป็น 10 พิกเซล / ขนาดตัวอักษร 1 และส่วนหัว 3 เป็น 19 พิกเซลแทนที่จะเป็น 18 พิกเซล / ขนาดตัวอักษร 4 (แม้ว่าจะยากที่จะ บอกความแตกต่างแม้ในการเปรียบเทียบโดยตรงและไม่สามารถใช้งานได้) ดูเหมือนว่า Gecko จะ จำกัด ข้อความไม่ให้มีขนาดเล็กกว่า 10 พิกเซล