สำหรับขนาดข้อความที่ปรับขนาดได้ ขนาดฟอนต์จะแสดงเป็น em ลาก่อน หนึ่ง em เท่ากับ 16px หรือ 12pt ค่าจะสัมพันธ์กับขนาดตัวอักษรขององค์ประกอบหลัก
ไวยากรณ์
ไวยากรณ์ของคุณสมบัติขนาดแบบอักษร CSS มีดังต่อไปนี้ -
Selector {
font-size: /*value*/
} ตัวอย่าง
ตัวอย่างต่อไปนี้แสดงให้เห็นว่าคุณสมบัติขนาดแบบอักษร CSS สามารถตั้งค่าเป็น ems ได้อย่างไร -
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 40%;
border: 2px solid yellow;
padding: 20px;
font-size: 1em;
}
span {
font-size: 2em;
background-color: chartreuse;
}
</style>
</head>
<body>
<div>
<p>This is a demo paragraph<span> displaying font sizes</span> set with em in CSS.</p>
</div>
</body>
</html> ผลลัพธ์
สิ่งนี้ให้ผลลัพธ์ต่อไปนี้ -
ตัวอย่าง
<!DOCTYPE html>
<html>
<head>
<style>
table {
width: 40%;
border: 2px ridge red;
font-size: 0.8em;
}
span {
font-size: 1.5em;
background-color: silver;
}
</style>
</head>
<body>
<h2>Class Info</h2>
<table>
<tr>
<th>Number of Students</th>
</tr>
<tr>
<td>Class A</td>
<td><span>50 Students</span></td>
</tr>
<tr>
<td>Class B</td>
<td><span>40 Students</span></td>
</tr>
</table>
</body>
</html> ผลลัพธ์
สิ่งนี้ให้ผลลัพธ์ต่อไปนี้ -
