คุณสมบัติ font-size

คุณสมบัติ font-size กำหนดขนาด ตัวอักษรของข้อความ ค่าของคุณสมบัติคือ หน่วยสำหรับขนาด ใดๆ (โดยทั่วไปคือ px, em หรือ rem) หรือคำสำคัญพิเศษ (ใช้ค่อนข้างน้อย)

ไวยากรณ์

cssตัวเลือก {
  font-size: ค่า;
}

ค่าในรูปแบบคำสำคัญ

ค่าเริ่มต้น: medium

ตัวอย่าง

ลองตั้งค่าขนาดตัวอักษรของย่อหน้าเป็น 20px:

html<p>
  Lorem ipsum dolor sit amet.
</p>

cssp {
  font-size: 20px;
}

Результат:

ตัวอย่าง

ในตัวอย่างนี้ สำหรับย่อหน้าถูกกำหนดขนาด เป็น 16px และสำหรับ span ภายใน - 150% ในกรณีนี้ขนาดตัวอักษรสำหรับ span จะ เป็น 150% ขององค์ประกอบแม่ของมัน นั่นคือย่อหน้า และขนาดจริงของมันจะ เป็น 16px * 150% = 24px:

html<p>
  Lorem <span>ipsum dolor</span> sit amet.
</p>

cssp {
  font-size: 16px;
}
span {
  font-size: 150%;
}

Результат:

ตัวอย่าง

ในตัวอย่างนี้ สำหรับย่อหน้าถูกกำหนดขนาด เป็น 16px และสำหรับ span ภายใน - larger ในกรณีนี้ขนาดตัวอักษรสำหรับ span จะ ใหญ่กว่าขององค์ประกอบแม่ของมัน (ย่อหน้า):

html<p>
  Lorem <span>ipsum dolor</span> sit amet.
</p>

cssp {
  font-size: 16px;
}
span {
  font-size: larger;
}

Результат:

ตัวอย่าง

โปรดสังเกตว่าตัวอักษรที่มี font-family ต่างกัน และมี font-size เท่ากัน อาจจะดูมีขนาด ไม่เท่ากันเลยทางสายตา (สำหรับการแก้ไข ปัญหานี้ โปรดดูคุณสมบัติ font-size-adjust)

ในตัวอย่างด้านล่าง ย่อหน้าทั้งสองถูกกำหนด font-size เป็น 16px แต่มี font-family ต่างกัน:

html<p id="elem1">
  Lorem ipsum dolor sit amet.
</p>
<p id="elem2">
  Lorem ipsum dolor sit amet.
</p>

css#elem1 {
  font-size: 16px;
  font-family: Arial;
}
#elem2 {
  font-size: 16px;
  font-family: "Times New Roman";
}

Результат: