การตั้งค่าขนาดแบบอักษรด้วยพิกเซลใน CSS

เราสามารถระบุ font-size ในพิกเซลเพื่อทำให้ข้อความใช้พิกเซลจำนวนเฉพาะเท่านั้น ขนาดพิกเซลขึ้นอยู่กับความละเอียดของหน้าจอและอัลกอริทึมที่เบราว์เซอร์ใช้คำนวณ

ไวยากรณ์

ไวยากรณ์ของคุณสมบัติ CSS font-size ดังนี้:

Selector {    font-size: /*value*/ }

ตัวอย่าง

ตัวอย่างต่อไปนี้แสดงวิธีตั้งค่า CSS font-size property ในพิกเซล:

<!DOCTYPE html> <html> <head> <style> span {    background-color: darkseagreen;    padding: 20px;    font-size: 15px; } span:nth-child(3) {    font-size: 55px; } span:last-child {    font-size: 25px; } </style> </head> <body> <br/> <span>one</span><span>two</span><span>three</span> </body> </html>

ผลลัพธ์

ได้ผลลัพธ์ดังนี้:

ตัวอย่างเพิ่มเติม

<!DOCTYPE html> <html> <head> <style> div {    width: 40%;    border: 2px solid yellow;    padding: 20px;    font-size: 10px; } div:nth-child(3) {    font-size: 20px; } div:last-child {    font-size: 30px; } </style> </head> <body> <br/> <div>one</div> <div>two</div> <div>three</div> </body> </html>

ผลลัพธ์

ได้ผลลัพธ์ดังนี้: