Thuộc tính font-family trong CSS
Trần Thị Vân - 1691
- 17/07/2025
Chức năng của Thuộc tính font-family trong CSS
Thuộc tính font-family trong CSS dùng để chọn font chữ mặc định của trình duyệt hoặc đặt tên cho font chữ nhúng từ file, ngoài ra còn có thể gọi tên font nhúng từ google, sau đó dùng để áp font chữ đã lấy lên văn bản của phần tử HTML.
Cú pháp của Thuộc tính font-family trong CSS
font-family: giatri;
giatri: Giá trị dùng để đặt tên font và dùng tên font đó để áp font chữ cho văn bản của HTML.
Ví dụ Thuộc tính font-family trong CSS
font-family: OpenSansCondensed-Bold;
font-family: Roboto, sans-serif;
font-family: Arial, Helvetica, sans-serif;
font-family: "Times New Roman", Times, serif;
<!DOCTYPE html>
<html>
<head>
<title>Chạy thử Ví dụ Thuộc tính font-family trong CSS</title>
<link media="all" href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
<style>
@charset "utf-8";
@font-face { font-family: OpenSansCondensed-Bold; src:url(https://webmoi.vn/media/css/fonts/OpenSansCondensed-Bold.ttf);
}
body{font-size:17px}
</style>
</head>
<body>
<h1>Chạy thử Ví dụ Thuộc tính font-family trong CSS</h1>
<p>Dùng để chọn font chữ mặc định của trình duyệt hoặc đặt tên cho font chữ nhúng từ file, ngoài ra còn có thể gọi tên font nhúng từ google, sau đó dùng để áp font chữ đã lấy lên văn bản của phần tử HTML:</p>
<!--Font nhúng từ file font-->
<p style="font-family: OpenSansCondensed-Bold;">font-family: OpenSansCondensed-Bold;</p>
<!--Font nhúng từ google-->
<p style="font-family: Roboto, sans-serif;">font-family: Roboto, sans-serif;</p>
<!--Font mặc định-->
<p style="font-family: Arial, Helvetica, sans-serif;">font-family: Arial, Helvetica, sans-serif;</p>
<p style="font-family: 'Times New Roman', Times, serif;">font-family: "Times New Roman", Times, serif;</p>
</body>
</html>
Cách sử dụng font-family hiệu quả trong CSS
Chọn đúng font-family không chỉ giúp văn bản đẹp hơn mà còn ảnh hưởng trực tiếp đến khả năng đọc và sự ổn định của giao diện trên nhiều thiết bị. Khi khai báo, nên xác định một font chính và chuẩn bị thêm các font dự phòng để trình duyệt vẫn hiển thị nội dung hợp lý nếu font đầu tiên không khả dụng.
Chọn font chính và font dự phòng
Không nên chỉ khai báo một font duy nhất, bởi font có thể không tồn tại trên thiết bị của người dùng hoặc không tải được từ nguồn bên ngoài. Có thể đặt nhiều font theo thứ tự ưu tiên, trình duyệt sẽ lần lượt tìm font phù hợp.
body {
font-family: "Arial", "Helvetica", sans-serif;
}
Trong ví dụ trên, trình duyệt ưu tiên Arial, nếu không có sẽ thử Helvetica, cuối cùng sử dụng nhóm sans-serif mà hệ thống cung cấp. Cách này giúp giao diện có phương án dự phòng thay vì phụ thuộc hoàn toàn vào một font cụ thể.
Ưu tiên khả năng hiển thị trên nhiều thiết bị
Một font hiển thị đẹp trên máy tính chưa chắc mang lại trải nghiệm tương tự trên điện thoại hoặc hệ điều hành khác. Vì vậy, nên ưu tiên những font có khả năng tương thích tốt và kiểm tra giao diện ở nhiều kích thước màn hình trước khi sử dụng chính thức.
Đối với website có nội dung tiếng Việt, cần đặc biệt chú ý khả năng hỗ trợ đầy đủ ký tự có dấu. Nếu font thiếu ký tự, trình duyệt có thể tự chuyển sang font khác, khiến kiểu chữ trong cùng một đoạn văn bị thay đổi.
Tránh khai báo font-family không cần thiết
Việc đưa quá nhiều font vào một danh sách không làm văn bản đẹp hơn mà có thể khiến việc quản lý kiểu chữ trở nên phức tạp. Chỉ nên giữ những font thực sự cần thiết và sắp xếp chúng theo mức độ ưu tiên rõ ràng.
Ngoài ra, không nên sử dụng tên font tùy ý nếu font đó không được cung cấp cho trình duyệt. Một cấu hình gọn, có font chính và nhóm font dự phòng phù hợp sẽ giúp giao diện dễ kiểm soát hơn.
Lời kết
Cảm ơn các bạn đã tham khảo bài viết Thuộc tính font-family trong CSS.
- 0 Bình luận
Email, Điện thoại của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *
