Thuộc tính font-size trong CSS
Trần Thị Vân - 1378
- 12/07/2025
Chức năng của Thuộc tính font-size trong CSS
Thuộc tính font-size trong CSS dùng để quy định độ lớn nhỏ của văn bản trong phần tử HTML, bạn có thể dùng px, phần trăm, medium, các kiểu về large, các kiểu về small để chọn kích cỡ cho văn bản.
Cú pháp của Thuộc tính font-size trong CSS
font-size: giatri;
giatri: Giá trị dùng để quy định kích thước cho văn bản trong phần tử HTML (Ví dụ: px, %, large, larger, x-large, xx-large, medium, small, xx-small, x-small, smaller)
Ví dụ Thuộc tính font-size trong CSS
font-size: 15px;
font-size: 25px;
font-size: 150%;
font-size: large;
font-size: larger
font-size: x-large
font-size: xx-large
font-size: medium
font-size: small
font-size: xx-small
font-size: x-small
font-size: smaller
<!DOCTYPE html>
<html>
<head>
<title>Chạy thử Ví dụ Thuộc tính font-size trong CSS</title>
<style>
body {font-family: Arial, Helvetica, sans-serif;}
</style>
</head>
<body>
<h1>Chạy thử Ví dụ Thuộc tính font-size trong CSS</h1>
<p>Dùng để quy định độ lớn nhỏ của văn bản trong phần tử HTML, bạn có thể dùng px, phần trăm, medium, các kiểu về large, các kiểu về small để chọn kích cỡ cho văn bản:</p>
<p style="font-size: 15px;">font-size: 15px;</p>
<p style="font-size: 25px;">font-size: 25px;</p>
<p style="font-size: 150%;">font-size: 150%;</p>
<p style="font-size: large;">font-size: large;</p>
<p style="font-size: larger">font-size: larger</p>
<p style="font-size: x-large">font-size: x-large</p>
<p style="font-size: xx-large">font-size: xx-large</p>
<p style="font-size: medium">font-size: medium</p>
<p style="font-size: small">font-size: small</p>
<p style="font-size: xx-small">font-size: xx-small</p>
<p style="font-size: x-small">font-size: x-small</p>
<p style="font-size: smaller">font-size: smaller</p>
</body>
</html>
Ứng dụng font-size CSS để xây dựng giao diện dễ đọc
Chọn kích thước chữ phù hợp giúp nội dung trên website dễ đọc, dễ phân biệt và tạo cảm giác cân đối cho toàn bộ giao diện. Thay vì đặt một kích thước cố định cho mọi thành phần, nên xác định kích thước dựa trên vai trò của nội dung và thiết bị người dùng.
Thiết lập kích thước chữ cho từng loại nội dung
Mỗi loại nội dung nên có kích thước riêng để tạo thứ bậc thị giác rõ ràng. Tiêu đề cần nổi bật hơn nội dung chính, trong khi phần chú thích hoặc thông tin phụ có thể dùng kích thước nhỏ hơn.
Có thể thiết lập kích thước chữ trực tiếp bằng thuộc tính font-size:
.title {
font-size: 32px;
}
.content {
font-size: 16px;
}
.note {
font-size: 14px;
}
Cách phân cấp này giúp người đọc nhanh chóng nhận biết đâu là nội dung chính, đâu là thông tin bổ sung mà không cần thay đổi quá nhiều kiểu định dạng khác.
Kết hợp font-size với đơn vị tương đối trong CSS
Đơn vị tương đối như em, rem giúp kích thước chữ linh hoạt hơn so với việc chỉ sử dụng px. Trong đó, rem thường thuận tiện khi muốn xây dựng hệ thống kích thước chữ thống nhất trên toàn website.
body {
font-size: 1rem;
}
h2 {
font-size: 2rem;
}
p {
font-size: 1rem;
}
Khi sử dụng đơn vị tương đối, các thành phần có thể thích ứng tốt hơn với thiết lập kích thước chữ của trình duyệt và cấu trúc giao diện. Đây là lựa chọn phù hợp cho những website cần chú trọng khả năng đọc và tính linh hoạt.
Điều chỉnh kích thước chữ theo màn hình thiết bị
Kích thước chữ phù hợp trên màn hình lớn chưa chắc tạo trải nghiệm tốt trên điện thoại. Với màn hình nhỏ, tiêu đề quá lớn có thể chiếm nhiều dòng, còn chữ quá nhỏ lại khiến người dùng khó đọc.
Có thể sử dụng media query để điều chỉnh kích thước chữ theo chiều rộng màn hình:
h2 {
font-size: 32px;
}
@media (max-width: 768px) {
h2 {
font-size: 26px;
}
}
Cách này giúp giao diện duy trì sự cân đối trên nhiều thiết bị. Khi thiết kế responsive, nên kiểm tra trực tiếp trên màn hình điện thoại, máy tính bảng và máy tính để lựa chọn kích thước chữ phù hợp với lượng nội dung thực tế.
Lời kết
Cảm ơn các bạn đã tham khảo bài viết Thuộc tính font-size 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 *
