Thuộc tính viết tắt font trong CSS

Trong bài học trước, chúng ta đã phân tích nhiều thuộc tính cho văn bản. Thông thường, việc phải viết riêng từng thuộc tính trong số này khá cồng kềnh, vì vậy trong CSS, để tiện lợi hơn, tồn tại một thuộc tính viết tắt đặc biệt font. Thuộc tính này cho phép đồng thời thiết lập kích thước phông chữ, họ phông chữ, độ đậm, kiểu nghiêng và khoảng cách giữa các dòng.

Thuộc tính được mô tả có cú pháp như sau:

font-style font-weight font-size / line-height font-family

Trong đó, thứ tự của các thuộc tính có ý nghĩa, và bắt buộc phải có font-size và font-family. Hãy chú ý rằng các thuộc tính khác, ngoài những thuộc tính được mô tả ở trên trong cú pháp, không nằm trong thuộc tính viết tắt này.

Hãy xem qua các ví dụ.

Ví dụ

Giả sử chúng ta có các kiểu sau:

p {
	font-size: 16px;
	font-family: Arial;
}

Hãy viết lại chúng thông qua thuộc tính viết tắt:

p {
	font: 16px Arial;
}

Ví dụ

Giả sử chúng ta có các kiểu sau:

p {
	font-size: 16px;
	font-family: Arial;
	line-height: 50px;
}

Hãy viết lại chúng thông qua thuộc tính viết tắt:

p {
	font: 16px/50px Arial;
}

Ví dụ

Giả sử chúng ta có các kiểu sau:

p {
	font-size: 16px;
	font-family: Arial;
	font-weight: bold;
}

Hãy viết lại chúng thông qua thuộc tính viết tắt:

p {
	font: bold 16px Arial;
}

Ví dụ

Giả sử chúng ta có các kiểu sau:

p {
	font-size: 16px;
	font-family: Arial;
	font-weight: bold;
	line-height: 50px;
	font-style: italic;
}

Hãy viết lại chúng thông qua thuộc tính viết tắt:

p {
	font: bold italic 16px/50px Arial;
}

Bài tập thực hành

Rút gọn mã, sử dụng thuộc tính viết tắt font:

p {
	font-family: "Times New Roman";
	font-size: 13px;
	line-height: 20px;
}

Rút gọn mã, sử dụng thuộc tính viết tắt font:

p {
	width: 300px;
	font-family: Arial;
	color: red;
	font-size: 40px;
	font-weight: bold;
}

Rút gọn mã, sử dụng thuộc tính viết tắt font:

p {
	font-family: Arial;
	font-size: 40px;
	font-weight: bold;
	text-indent: 50px;
	font-style: italic;
	line-height: 60px;
}