Thuộc tính font-size

Thuộc tính font-size thiết lập kích thước phông chữ của văn bản. Giá trị của thuộc tính là bất kỳ đơn vị cho kích thước nào (thông thường, đó là px, em hoặc rem) hoặc các từ khóa đặc biệt (được sử dụng rất hiếm khi).

Cú pháp

bộ chọn {
	font-size: giá trị;
}

Giá trị dưới dạng từ khóa

Giá trị	Mô tả
`xx-small`	Rất rất nhỏ. Ví dụ: Lorem ipsum dolor sit amet.
`x-small`	Rất nhỏ. Ví dụ: Lorem ipsum dolor sit amet.
`small`	Nhỏ. Ví dụ: Lorem ipsum dolor sit amet.
`medium`	Trung bình. Ví dụ: Lorem ipsum dolor sit amet.
`large`	Lớn. Ví dụ: Lorem ipsum dolor sit amet.
`x-large`	Rất lớn. Ví dụ: Lorem ipsum dolor sit amet.
`xx-large`	Rất rất lớn. Ví dụ: Lorem ipsum dolor sit amet.
`larger`	Lớn hơn phông chữ của phần tử cha một giá trị nhất định.
`smaller`	Nhỏ hơn phông chữ của phần tử cha một giá trị nhất định.

Giá trị mặc định: medium.

Ví dụ

Hãy đặt kích thước phông chữ cho các đoạn văn là 20px:

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

p {
	font-size: 20px;
}

Ví dụ

Trong ví dụ này, đoạn văn được đặt kích thước là 16px, còn phần tử span bên trong nó là 150%. Trong trường hợp này, kích thước phông chữ cho span sẽ là 150% so với phần tử cha của nó, tức là đoạn văn, và kích thước thực tế của nó sẽ là 16px * 150% = 24px:

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

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

Ví dụ

Trong ví dụ này, đoạn văn được đặt kích thước là 16px, còn phần tử span bên trong nó là larger. Trong trường hợp này, kích thước phông chữ cho span sẽ lớn hơn so với phần tử cha của nó (đoạn văn):

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

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

Ví dụ

Hãy lưu ý rằng các phông chữ với font-family khác nhau và cùng một font-size có thể trông hoàn toàn không cùng kích thước (để giải quyết vấn đề này hãy xem thuộc tính font-size-adjust).

Trong ví dụ dưới đây, cả hai đoạn văn đều được đặt font-size là 16px, nhưng font-family khác nhau:

<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";
}