CSS font-family là một thuộc tính trong CSS được sử dụng để cung cấp danh sách các font chữ được phân tách bằng dấu phẩy. Thuộc tính này đặt font chữ cho nội dung văn bản của một phần tử trên trang web. Nó có thể chứa nhiều tên font khác nhau để sử dụng khi một font không được hỗ trợ trong trình duyệt, các font khác có thể được sử dụng.
Lập Trình Viên mời bạn cùng tham khảo chi tiết nội dung bên dưới.
CSS font-family là gì ?
Để hiểu rõ hơn về thuộc tính CSS font-family, ta có thể chia các tên font chữ trong CSS thành hai loại:
- family-name: Đây là tên font chữ cụ thể như “Courier”, “Arial”, “Times” và nhiều hơn nữa.
- generic-family: Đây là tên phổ thông của các loại font chữ, bao gồm năm loại: “serif”, “sans-serif”, “cursive”, “fantasy” và “monospace”. Thường được đặt cuối danh sách các tên font chữ.
Sử dụng các loại font chữ khác nhau sẽ giúp trang web trở nên hấp dẫn hơn.
Bây giờ, chúng ta hãy cùng đi vào từng loại generic-family cụ thể.
serif
Serif được sử dụng chủ yếu khi viết văn bản cho in ấn, chẳng hạn như sách, tạp chí, báo và nhiều hơn nữa. Nó bao gồm các font chữ như Georgia, Garamond, Times New Roman, Minion và nhiều hơn nữa.
sans-serif
Sans-serif thường được sử dụng trong kiểu chữ hiện đại, trang trọng và đơn giản. Nó được sử dụng rộng rãi nhất trong dạng văn bản số hóa. Đây là các font chữ như Arial, Calibri, Verdana, Futura, Lato và nhiều hơn nữa.
cursive
Cursive được sử dụng chủ yếu để viết thư mời, tin nhắn không chính thức và nhiều hơn nữa. Nó giống như các văn bản dạng chữ viết tay được viết bằng bút hoặc cọ. Danh sách font chữ nó bao gồm Insolente, Corsiva, Flanella, Belluccia, Zapfino và nhiều hơn nữa.
monospace
Monospace được sử dụng cho chỉ dẫn, địa chỉ thư và văn bản gõ máy. Danh sách font chữ bao gồm Monaco, SimSun, Courier, Consolas, Inconsolata và nhiều hơn nữa.
fantasy
Fantasy là loại font chữ để làm cho văn bản trở nên phong phú, trang trí và ấn tượng hơn. Nó bao gồm các font chữ như Impact, Copperplate, Cracked, Critter và nhiều hơn nữa.
Thuộc tính CSS font-family được sử dụng bởi các nhà thiết kế web và các lập trình viên. Họ sử dụng nó để đặt font chữ cho các phần tử trên trang web để tạo ra trải nghiệm người dùng tốt hơn.
Hướng dẫn CSS font-family
Để sử dụng thuộc tính font-family trong CSS, ta cần chỉ định một danh sách các font chữ theo thứ tự ưu tiên từ cao đến thấp.Ví dụ:
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;Trong ví dụ trên, nếu trình duyệt không hỗ trợ “Helvetica Neue”, nó sẽ thử “Helvetica” và sau đó “Arial”. Nếu tất cả các font chữ này đều không được hỗ trợ, font chữ mặc định của trình duyệt (thường là “sans-serif”) sẽ được sử dụng.
Ngoài ra, ta cũng có thể chỉ định các generic family name như sau:
font-family: serif;Điều này sẽ sử dụng các font chữ từ generic family “serif”.
<!DOCTYPE html>
<html>
<head>
<style>
body{
text-align:center;
}
h1.a {
font-family: "Times New Roman", Times, serif;
color:Red;
}
h2.b {
font-family: Arial, Helvetica, sans-serif;
color:blue;
}
</style>
</head>
<body>
<h1>The font-family Property</h1>
<h1 class="a">Hello World :) :)</h1>
<h2 class="b">Welcome to the Laptrinhvien.org</h2>
</body>
</html>Kết Quả:
Ưu và Nhược điểm CSS font-family
Ưu điểm của CSS font-family là cho phép ta đặt font chữ để tạo ra thiết kế web đẹp mắt và dễ đọc. Tuy nhiên, việc sử dụng quá nhiều font chữ khác nhau có thể làm tăng thời gian tải trang web.
Ngoài ra, nếu ta không đặt font chữ dự phòng đúng cách, nội dung trên trang web sẽ hiển thị không đúng hoặc không rõ ràng khi font chữ yêu cầu không được hỗ trợ.
Khi sử dụng CSS font-family, ta nên đặt font chữ dự phòng đúng thứ tự ưu tiên và chỉ sử dụng một số font chữ cần thiết để giảm thời gian tải trang web.
Ngoài ra, ta nên kiểm tra trang web của mình trên các trình duyệt khác nhau để đảm bảo rằng font chữ được hiển thị chính xác trên mọi nền tảng.
CSS font-family là gì?
CSS font-family là thuộc tính trong CSS để đặt font chữ cho nội dung văn bản của một phần tử trên trang web.
Có bao nhiêu loại generic family name trong CSS font-family?
Có năm loại generic family name trong CSS font-family: serif, sans-serif, cursive, fantasy và monospace.
Ai sử dụng CSS font-family?
CSS font-family được sử dụng bởi các nhà thiết kế web và các lập trình viên.
Tại sao ta nên đặt font chữ dự phòng trong CSS font-family?
Nếu một font chữ không được hỗ trợ trong trình duyệt, font chữ dự phòng sẽ được sử dụng để hiển thị nội dung trên trang web.
Làm thế nào để sử dụng CSS font-family trong CSS?
Ta chỉ cần đặt danh sách các font chữ theo thứ tự ưu tiên từ cao đến thấp hoặc chỉ định các generic family name.