การกำหนดขนาดของ Font ด้วย %

การกำหนดค่าของ font-size นอกจากจะสามารถกำหนดขนาดเป็น

  • px (Pixel)
  • pt  (Point)
  • pc  (Pica)
  • em
  • ex

แล้วยังสามารถกำหนดหน่วยให้เป็น % ได้ด้วย ยกตัวอย่างเช่น

ความหมายคือ header ที่กำหนดด้วย <h3></h3> จะมีขนาดเป็น 80% ของ default font

ซึ่งสิ่งที่ต้องระวังไว้คือ แต่ละ browser ก็จะทำการกำหนดค่าไว้แตกต่างกันดังนั้นเราต้องกำหนด font ที่ต้องการให้เป็น default ให้กับ body

ใน element ต่างๆ ที่อยู่ใน body จะกำหนดค่าเป็น % เพื่อที่จะให้แสดงผลสัมพันธ์กับขนาดของ font ใน body ได้

การกำหนดขนาดของ font ด้วยหน่วยต่างๆ

การกำหนดขนาดของ font ทำได้โดยการกำหนด font-size ว่าให้มีค่าเป็นเท่าไหร่และใช้หน่วยอะไร ตามตัวอย่าง

โดยก่อนหน้านี้เราได้พูดถึงหน่วยที่สามารถใช้งานได้ภายใน CSS ซึ่งสามารถตามไปอ่านย้อนหลังได้ที่ การเลือกใช้หน่วยใน CSS โดยในบทความนี้จะพูดถึงลักษณะของหน่วยต่างๆกับ font-size เท่านั้น

เริ่มจากในตัวอย่างจะเป็นการกำหนดขนาดของ font ที่เป็น default ไว้ที่ 10 pixel จะเป็นค่าที่คงที่เสมอไม่ว่าจะแสดงผลทางหน้าจอ หรือ print ออกกระดาษ และไม่ว่าขนาดของกระดาษจะเป็นเท่าไหร่ก็ตาม font ก็จะมีขนาดที่คงที่เสมอ

ถ้าเราต้องการให้หน้าจอของเราปรับขนาดของตัวอักษรได้ Small, Medium หรือ Large เราจะต้องเลือกหน่วยเป็น em โดยถ้าเรากำหนดขนาดของ font ไว้ที่ 1 em

สิ่งที่เราจะได้คือการกำหนดขนาดของตัวอักษรใน Setting  (Small, Medium, Large) จะมีผลทำให้ขนาดของตัวอักษรเปลี่ยนตาม

ใน Chrome เราสามารถเข้าไปที่ Setting หลังจากนั้นเลือก Advance Setting แล้วก็เปลี่ยน font size ใน Web Content ขนาดของ font ที่กำหนด font-size โดยใช้หน่วย em จะเปลี่ยนตาม