คุณสมบัติ 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";
}