2.1 Thuộc tính font-family
Phông chữ đóng vai trò quan trọng trong thiết kế web, ảnh hưởng đến tính dễ đọc và sự hấp dẫn trực quan của văn bản. Các họ phông chữ xác định phong cách chung và các đặc điểm của phông chữ mà bạn có thể sử dụng trên trang web. Trong CSS, phông chữ thường được chia thành ba họ chính: serif, sans-serif và monospace. Hãy xem xét chi tiết từng loại.
Thuộc tính font-family
Thuộc tính font-family được sử dụng để chỉ định các họ phông chữ. Bạn có thể chỉ định nhiều phông chữ, ngăn cách chúng bằng dấu phẩy, để trình duyệt có thể sử dụng phông chữ tiếp theo trong danh sách nếu phông chữ đầu tiên không có sẵn.
Ví dụ sử dụng nhiều phông chữ
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
Ví dụ sử dụng:
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
<body>
<p>Văn bản này hiện thị sử dụng phông chữ Helvetica Neue, Helvetica hoặc Arial.</p>
</body>
2.2 Họ phông chữ serif
Phông chữ có chân (serif) được đặc trưng bởi những đường nhỏ hoặc nét được thêm vào các đầu của chữ cái và ký tự. Những phông chữ này mang lại vẻ truyền thống và trang trọng hơn cho văn bản.
Ví dụ về phông chữ serif:
- Times New Roman
- Georgia
- Garamond
- Baskerville
Ví dụ sử dụng:
body {
font-family: 'Times New Roman', serif;
}
<body>
<h1>This is a heading</h1>
<p>This is a paragraph using a serif font.</p>
</body>
2.3 Họ phông chữ sans-serif
Phông chữ không chân (sans-serif) không có đường nhỏ ở các đầu chữ cái và ký tự. Những phông chữ này có vẻ đơn giản, hiện đại và thường được sử dụng trong thiết kế web do tính dễ đọc trên màn hình của chúng.
Ví dụ về phông chữ sans-serif:
- Arial
- Helvetica
- Verdana
- Open Sans
body {
font-family: 'Arial', sans-serif;
}
<body>
<h1>This is a heading</h1>
<p>This is a paragraph using a sans-serif font.</p>
</body>
2.4 Họ phông chữ monospace
Phông chữ đơn cách (monospace) có chiều rộng bằng nhau cho tất cả các ký tự. Những phông chữ này thường được sử dụng để hiện thị mã, tài liệu kỹ thuật và bảng, nơi cần thiết phải căn chỉnh ký tự theo chiều dọc.
Ví dụ về phông chữ monospace:
- Courier New
- Consolas
- Monaco
- Lucida Console
Ví dụ sử dụng:
body {
font-family: 'Courier New', monospace;
}
<body>
<h1>This is a heading</h1>
<p>This is a paragraph using a monospace font.</p>
<pre>
function helloWorld() {
console.log("Hello, world!");
}
</pre>
</body>
Để cải thiện sự nhận thức và đa dạng về phong cách trên trang web, việc kết hợp nhiều họ phông chữ khác nhau thường được sử dụng. Ví dụ: tiêu đề có thể được định dạng bằng phông chữ serif, trong khi văn bản chính có thể sử dụng phông chữ sans-serif. Còn mã thì luôn là monospace.
GO TO FULL VERSION