ความแตกต่างของหน่วยขนาดฟอนต์ใน CSS

หลังจากที่สงสัยมานานและก็ไม่มีข้อมูลไหนที่จะพอทำให้เข้าใจได้มากเท่าไรจนกระทั่งหยิบหนังสือที่ซื้อมานานละ มาอ่านนั้นคือ ”รวมเด็ดเคล็ดลับ 101 Tips & Tricks CSS” มาอ่านครับเลยได้ไขข้อกระจ่าง ตรงนี้ได้อย่างดีอันนี้เป็นบันทึกที่ผมจดและนำมาแบ่งปันให้ผู้อ่านได้รู้กันนะครับ สรุปได้ดังนี้

pt หรือ point มีขนาดเท่ากับ 1/72 นิ้ว
pc หรือ pica มีขนาดเท่ากับ 1/6 นิ้ว

เป็นหน่วยที่ควรหลีกเลี่ยงในการทำเว็บ ซึ่งมันเอาไว้ใช้งานกับการออกแบบสิ่งพิมพ์ ทำให้เมื่อหน้าจอที่เรากำหนดขนาดของฟอนต์ด้วยหน่วยทั้งสองนี้ เมื่อพิมพ์ออกมาจะมีขนาดตรงตามที่เรากำหนด เพราะขนาดไปอ้างอิงกับหน่วยนิ้วซึ่งมีขนาดจริงเท่ากันไม่ว่าจะพิมพ์ลงกระดาษหรือป้ายโฆษณา

px หรือ pixel

เป็นหน่วยที่ใช้ง่ายที่สุด แต่ควรหลีกเลี่ยงการใช้หน่วยนี้ในการพิมพ์ เพราะในการพิมพ์นั้น pixel นั้นอาจคลาดเคลื่อนได้เมื่อพิมพ์ เพราะเป็นหน่วยที่ไม่ได้อ้างอิงกับขนาดจริงบนสื่อสิ่งพิมพ์ดังเช่น pt และ pc

หน่วย em นั้นเป็นหน่วยแบบสัมพัทธ์คือ 1 em มีค่าเท่ากับความสูงของตัวอักษร M ใหญ่ตามขนาดปกติของฟอนต์ ในทาง CSS 1em คือขนาดเท่ากับฟอนต์ปกติที่ผู้ใช้งานกำหนด หรือเท่ากับขนาดฟอนต์ของอิลิเมนต์ (element) ที่อยู่เหนือกว่าในโครงสร้างลำดับชั้น ซึ่งถ้าใช้ em เราจะสามารถย่อและขยายขนาดตัวอักษรได้ซึ่งจะเป็นไปตามค่าขนาดของตัวอักษรที่ผู้ใช้งานกำหนดไว้ในเบราเซอร์ (ซึ่งถึงแม้เดียวนี้จะไม่ต้องใช้ em ก็สามารถย่อ-ขยายในเบราเซอร์รุ่นใหม่ๆได้้ แต่รุ่นเก่าๆอย่าง IE6 นั้นไม่สามารถย่อขยายได้) ซึ่งสามารถใส่เป็นทศนิยมได้ เช่น 1.1em เพื่อให้ตัวอักษรมีขนาดใหญ่กว่าปกติื 10% หรือ 0.9em เพื่อให้เล็กกว่าขนาดปกติ 10%

มีลักษณะคล้ายๆ em แต่อ้างอิงกับความสูงของตัวอักษร x เล็กแทน แต่เสียดายที่เบราเซอร์ที่เราใช้ๆกันอยู่ยังไม่มีความสามรถในการคำนวณขนาดหน่วย ex ได้อย่างแม่นยำจึงไม่เป็นที่นิยมใช้

percentage หรือ % นั้นเอง

การทำงานของ % นั้นเหมือนกับ em ซึ่งถ้าเอาไปกำหนดขนาดตัวอักษรนั้น 100% จะทำให้ข้อความที่ถูกกำหนดมีค่าเท่ากับฟอนต์ขนาดดีฟอลต์ ซึ่งเหมือนกับ 1em และการทำให้ตัวอักษรเล็กลงจากเดิม 10% ก็คือ 90% ถ้าต้องการให้ใหญ่กว่าเดิม 10% ก็ใส่ 110% เป็นต้น (ซึ่งหลังจากที่เคยใช้มาเราก็สามารถใส่ทศนิยมให้แก่ % ได้ด้วย เช่น 99.5%)

หวังว่าทุกท่านจะได้ความรู้เพิ่มไปไม่มากก็น้อยนะครับ