ขนาดตัวอักษร CSS
ขนาดตัวอักษร
คุณสมบัติfont-sizeกำหนดขนาดของข้อความ
ความสามารถในการจัดการขนาดตัวอักษรเป็นสิ่งสำคัญในการออกแบบเว็บ อย่างไรก็ตาม คุณไม่ควรใช้การปรับขนาดฟอนต์เพื่อทำให้ย่อหน้าดูเหมือนหัวเรื่อง หรือหัวเรื่องให้ดูเหมือนย่อหน้า
ใช้แท็ก HTML ที่เหมาะสมเสมอ เช่น <h1> - <h6> สำหรับส่วนหัวและ <p> สำหรับย่อหน้า
ค่าขนาดฟอนต์สามารถเป็นขนาดสัมบูรณ์หรือขนาดสัมพัทธ์
ขนาดที่แน่นอน:
- ตั้งค่าข้อความให้เป็นขนาดที่กำหนด
- ไม่อนุญาตให้ผู้ใช้เปลี่ยนขนาดข้อความในทุกเบราว์เซอร์ (ไม่ดีสำหรับเหตุผลในการเข้าถึง)
- ขนาดสัมบูรณ์มีประโยชน์เมื่อทราบขนาดจริงของเอาต์พุต
ขนาดสัมพัทธ์:
- กำหนดขนาดที่สัมพันธ์กับองค์ประกอบโดยรอบ
- อนุญาตให้ผู้ใช้เปลี่ยนขนาดข้อความในเบราว์เซอร์
หมายเหตุ:หากคุณไม่ระบุขนาดฟอนต์ ขนาดเริ่มต้นสำหรับข้อความปกติ เช่น ย่อหน้า คือ 16px (16px=1em)
กำหนดขนาดตัวอักษรด้วยพิกเซล
การตั้งค่าขนาดข้อความด้วยพิกเซลช่วยให้คุณควบคุมขนาดตัวอักษรได้อย่างเต็มที่:
ตัวอย่าง
h1 {
font-size: 40px;
}
h2 {
font-size: 30px;
}
p {
font-size: 14px;
}
เคล็ดลับ:หากคุณใช้พิกเซล คุณยังคงใช้เครื่องมือซูมเพื่อปรับขนาดทั้งหน้าได้
กำหนดขนาดตัวอักษรด้วย Em
เพื่อให้ผู้ใช้สามารถปรับขนาดข้อความ (ในเมนูเบราว์เซอร์) นักพัฒนาหลายคนใช้ em แทนพิกเซล
1em เท่ากับขนาดตัวอักษรปัจจุบัน ขนาดข้อความเริ่มต้นในเบราว์เซอร์คือ 16px ดังนั้น ขนาดเริ่มต้นของ 1em คือ 16px
ขนาดสามารถคำนวณจากพิกเซลถึง em โดยใช้สูตรนี้: พิกเซล /16= em
ตัวอย่าง
h1 {
font-size: 2.5em; /* 40px/16=2.5em */
}
h2 {
font-size: 1.875em; /* 30px/16=1.875em */
}
p {
font-size: 0.875em; /* 14px/16=0.875em */
}
ในตัวอย่างด้านบน ขนาดข้อความในหน่วย em จะเหมือนกับตัวอย่างก่อนหน้าในหน่วยพิกเซล อย่างไรก็ตาม ด้วยขนาดเอ็ม คุณสามารถปรับขนาดข้อความในเบราว์เซอร์ทั้งหมดได้
ขออภัย ยังมีปัญหากับ Internet Explorer เวอร์ชันเก่า ข้อความจะใหญ่กว่าที่ควรเมื่อทำให้ใหญ่ขึ้น และเล็กกว่าที่ควรเมื่อทำให้เล็กลง
ใช้การผสมผสานระหว่างเปอร์เซ็นต์และ Em
วิธีแก้ปัญหาที่ใช้ได้กับทุกเบราว์เซอร์ คือการตั้งค่าขนาดตัวอักษรเริ่มต้นเป็นเปอร์เซ็นต์สำหรับองค์ประกอบ <body>:
ตัวอย่าง
body {
font-size: 100%;
}
h1 {
font-size: 2.5em;
}
h2 {
font-size: 1.875em;
}
p {
font-size: 0.875em;
}
ตอนนี้รหัสของเราใช้งานได้ดีมาก! จะแสดงข้อความขนาดเดียวกันในทุกเบราว์เซอร์ และอนุญาตให้ทุกเบราว์เซอร์ซูมหรือปรับขนาดข้อความได้!
ขนาดตัวอักษรที่ตอบสนอง
ขนาดข้อความสามารถกำหนดได้ด้วยvwหน่วย ซึ่งหมายถึง "ความกว้างของวิวพอร์ต"
ด้วยวิธีนี้ ขนาดข้อความจะเป็นไปตามขนาดของหน้าต่างเบราว์เซอร์:
สวัสดีชาวโลก
ปรับขนาดหน้าต่างเบราว์เซอร์เพื่อดูว่าขนาดแบบอักษรปรับขนาดอย่างไร
ตัวอย่าง
<h1 style="font-size:10vw">Hello World</h1>
วิวพอร์ตคือขนาดหน้าต่างเบราว์เซอร์ 1vw = 1% ของความกว้างวิวพอร์ต หากวิวพอร์ตกว้าง 50 ซม. 1vw คือ 0.5 ซม.