📘 จะทำตัวหนาด้วย CSS ได้อย่างไร?
ถ้าคุณต้องการให้ข้อความ หนา ด้วย CSS ให้ใช้ font-weight: bold; เพียงดูตัวอย่างด้านล่างและคัดลอกโค้ดไปใช้ ก็สามารถทำตามได้ง่าย ๆ
✅ ตัวอย่าง
📋 โค้ดพร้อมคัดลอก
<style>
.bold-text {
font-weight: bold;
}
</style>
<p>ข้อความปกติ และ <span class="bold-text">ข้อความส่วนนี้หนา</span></p>🧠 เทคนิคการใช้น้ำหนักตัวอักษรอย่างมีประสิทธิภาพ
font-weight: bold เป็นคุณสมบัติของ CSS ที่เรียบง่ายแต่ทรงพลัง ใช้สำหรับสร้างลำดับชั้นของข้อความในเชิงภาพ เมื่อใช้อย่างเหมาะสมจะช่วยเน้นส่วนที่สำคัญของเนื้อหาได้อย่างมีประสิทธิภาพ
🎨 ความหลากหลายในการออกแบบ
นอกจากค่า bold แล้ว font-weight ยังสามารถกำหนดค่าเป็นตัวเลขตั้งแต่ 100 ถึง 900 ได้ เช่น font-weight: 600 คือกึ่งหนา (semi-bold) และ font-weight: 800 คือหนามาก (extra-bold) ทั้งนี้ควรตรวจสอบว่าแบบอักษรที่ใช้งานรองรับน้ำหนักเหล่านั้นหรือไม่
✨ เทคนิคการประยุกต์ขั้นสูง
เมื่อกำหนดฟอนต์แบบกำหนดเองด้วย @font-face สามารถระบุน้ำหนักด้วย font-weight เพื่อให้โหลดฟอนต์ตามน้ำหนักที่ถูกต้องได้ นอกจากนี้ การใช้ transition: font-weight 0.3s ease จะช่วยให้เอฟเฟกต์เปลี่ยนแปลงน้ำหนักฟอนต์เมื่อโฮเวอร์ดูราบรื่นยิ่งขึ้น
⚠️ ข้อควรระวังด้านการเข้าถึง
เมื่อต้องการใช้ตัวหนา ควรรักษาความต่างของสีให้มีอัตราส่วนคอนทราสต์อย่างน้อย 4.5:1 และไม่ควรพึ่งพาเพียงแค่ตัวหนาในการเน้นข้อมูลสำคัญ ควรใช้ร่วมกับองค์ประกอบภาพอื่น ๆ ด้วย การใช้ตัวหนาเกินไปอาจทำให้การอ่านยากขึ้น
น้ำหนักของฟอนต์ควรใช้อย่างสม่ำเสมอทั่วทั้งระบบการออกแบบ การกำหนดล่วงหน้าว่าจะใช้ความหนาใดสำหรับหัวข้อ ข้อความเน้น หรือปุ่มต่าง ๆ จะช่วยให้เกิดความกลมกลืนทางสายตา