การตั้งค่าขนาดฟอนต์ด้วยพิกเซล (px) ใน CSS

สำหรับการตั้งค่าคุณสมบัติ font-size ใน CSS สามารถใช้หน่วยพิกเซล (px) ได้ ซึ่งมีประโยชน์เมื่อต้องการความแม่นยำระดับพิกเซลสำหรับข้อความ

ตัวอย่างที่ 1: ใช้ขนาดฟอนต์ต่างๆ พร้อมพื้นหลัง HSLA

<!DOCTYPE html> <html> <head> <style> #demo1 {background-color: hsla(140, 100%, 50%, 0.8);} #demo2 {background-color: hsla(130, 100%, 50%, 0.6);} #demo3 {background-color: hsla(190, 100%, 50%, 0.4);} #demo4 {background-color: hsla(170, 100%, 50%, 0.3);} #demo5 {background-color: hsl(150, 100%, 60%);} #demo6 {background-color:rgba(108,111,35,0.6);    font-size:30px;    color:yellow;    transform: rotate(45deg); } </style> </head> <body> <h1>Cricketers</h1> <p id="demo1">David Warner</p> <p id="demo2">Steve Smith</p> <p id="demo3">Mark Waugh</p> <p id="demo4">Steve Waugh</p> <p id="demo5">David Johnson</p> <p id="demo6">Australian Cricketers</p> </body> </html>

ผลลัพธ์

ตัวอย่างที่ 2: ใช้ font-size 25px พร้อม text-decoration

<!DOCTYPE html> <html> <head> <style> .demo {    text-decoration: overline;    text-decoration-color: yellow;    font-size: 25px; } </style> </head> <body> <h1>Examination Details</h1> <p class="demo">Exam on 20th December.</p> <p class="demo2">Exam begins at 9AM.</p> </body> </html>

ผลลัพธ์

ข้อดีและข้อเสียของหน่วย px

แนะนำ: สำหรับข้อความหลัก ควรใช้หน่วยสัมพัทธ์อย่าง rem หรือ em เพื่อรองรับการปรับขนาดของผู้ใช้