คุณสมบัติ font-size
คุณสมบัติ font-size กำหนดขนาด
ตัวอักษรของข้อความ ค่าของคุณสมบัติคือ
หน่วยสำหรับขนาด ใดๆ
(โดยทั่วไปคือ px, em
หรือ rem) หรือคำสำคัญพิเศษ
(ใช้ค่อนข้างน้อย)
ไวยากรณ์
ตัวเลือก {
font-size: ค่า;
}
ค่าในรูปแบบคำสำคัญ
| ค่า | คำอธิบาย |
|---|---|
xx-small |
เล็กที่สุดมากๆ ตัวอย่าง: Lorem ipsum dolor sit amet. |
x-small |
เล็กที่สุด ตัวอย่าง: Lorem ipsum dolor sit amet. |
small |
เล็ก ตัวอย่าง: Lorem ipsum dolor sit amet. |
medium |
กลาง ตัวอย่าง: Lorem ipsum dolor sit amet. |
large |
ใหญ่ ตัวอย่าง: Lorem ipsum dolor sit amet. |
x-large |
ใหญ่มาก ตัวอย่าง: Lorem ipsum dolor sit amet. |
xx-large |
ใหญ่ที่สุด ตัวอย่าง: Lorem ipsum dolor sit amet. |
larger |
ใหญ่กว่าตัวอักษรขององค์ประกอบแม่เป็นค่าหนึ่ง |
smaller |
เล็กกว่าตัวอักษรขององค์ประกอบแม่เป็นค่าหนึ่ง |
ค่าเริ่มต้น: medium
ตัวอย่าง
ลองตั้งค่าขนาดตัวอักษรของย่อหน้าเป็น
20px:
<p>
Lorem ipsum dolor sit amet.
</p>
p {
font-size: 20px;
}
:
ตัวอย่าง
ในตัวอย่างนี้ สำหรับย่อหน้าถูกกำหนดขนาด
เป็น 16px และสำหรับ span ภายใน - 150%
ในกรณีนี้ขนาดตัวอักษรสำหรับ span จะ
เป็น 150% ขององค์ประกอบแม่ของมัน
นั่นคือย่อหน้า และขนาดจริงของมันจะ
เป็น :
16px * 150% = 24px
<p>
Lorem <span>ipsum dolor</span> sit amet.
</p>
p {
font-size: 16px;
}
span {
font-size: 150%;
}
:
ตัวอย่าง
ในตัวอย่างนี้ สำหรับย่อหน้าถูกกำหนดขนาด
เป็น 16px และสำหรับ span ภายใน - larger
ในกรณีนี้ขนาดตัวอักษรสำหรับ span จะ
ใหญ่กว่าขององค์ประกอบแม่ของมัน (ย่อหน้า):
<p>
Lorem <span>ipsum dolor</span> sit amet.
</p>
p {
font-size: 16px;
}
span {
font-size: larger;
}
:
ตัวอย่าง
โปรดสังเกตว่าตัวอักษรที่มี
font-family
ต่างกัน และมี font-size เท่ากัน อาจจะดูมีขนาด
ไม่เท่ากันเลยทางสายตา (สำหรับการแก้ไข
ปัญหานี้ โปรดดูคุณสมบัติ font-size-adjust)
ในตัวอย่างด้านล่าง ย่อหน้าทั้งสองถูกกำหนด font-size
เป็น 16px แต่มี font-family ต่างกัน:
<p id="elem1">
Lorem ipsum dolor sit amet.
</p>
<p id="elem2">
Lorem ipsum dolor sit amet.
</p>
#elem1 {
font-size: 16px;
font-family: Arial;
}
#elem2 {
font-size: 16px;
font-family: "Times New Roman";
}
: