CSS Font-size – Cách thay đổi Font-size trong CSS

Posted by Lập Trình Viên CSS 5 phút đọc

Trong CSS, thuộc tính font-size được sử dụng để chỉ định chiều cao và kích thước của phông chữ. Nó ảnh hưởng đến kích thước của văn bản trong một phần tử. Giá trị mặc định của nó là medium và có thể áp dụng cho mọi phần tử.

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-size là gì?

CSS Font-size dùng để đặt kích thước chữ cho các phần tử trên website. Đây là một trong những thuộc tính cơ bản của CSS và được sử dụng rộng rãi trong thiết kế web.

CSS Font-size được sử dụng bởi các nhà thiết kế web và những người muốn kiểm soát kích thước chữ hiển thị trên trang web của mình.

Hướng dẫn CSS Font-size

Cú pháp của font-size có thể là tuyệt đối hoặc tương đối.

Tuyệt đối: Sử dụng để đặt kích thước văn bản theo kích thước cụ thể, không thể thay đổi kích thước văn bản trên tất cả các trình duyệt.

Tương đối: Sử dụng để đặt kích thước văn bản liên quan đến các phần tử hàng xóm của nó, có thể thay đổi kích thước văn bản trên tất cả các trình duyệt.

Font-size with pixels: Đặt kích thước văn bản sử dụng pixel. Khi sử dụng pixel, ta có toàn quyền kiểm soát kích thước của văn bản.

Font-size with em: Đặt kích thước văn bản sử dụng đơn vị em. Phần lớn các nhà phát triển ưa thích em hơn là pixels và được khuyến cáo bởi W3C. Kích thước mặc định của chữ trong trình duyệt là 16px. Vậy, kích thước mặc định của 1em là 16px. Công thức tính kích thước từ pixels sang em như sau:

em = pixels / 16

Responsive font size: Chúng ta có thể đặt kích thước văn bản bằng cách sử dụng đơn vị vw, đại diện cho chiều rộng viewport. 1vw = 1% chiều rộng viewport. Nếu chiều rộng của viewport là 50cm, thì 1vw bằng 0.5cm.

Font-size with the length property: Sử dụng để đặt kích thước của phông chữ theo chiều dài. Chiều dài có thể là cm, px, pt, v.v… Giá trị âm không được phép trong thuộc tính font-size.

Ví dụ:

<!DOCTYPE html>  
<html>  
<head>  
<style>  
#first {  
  font-size: 2.5em; /* 40px/16=2.5em */  
}  
  
#second {  
  font-size: 1.875em; /* 30px/116=1.875em */  
 }  
  
#third {  
  font-size: 0.875em; /* 14px/16=0.875em */  
}  
</style>  
</head>  
<body>  
  
<p id='first'>First paragraph.</p>  
<p id='second'>Second paragraph</p>  
<p id='third'>Third Paragraph.</p>  
</body>  
</html>

Kết Quả:

Ưu và Nhược điểm CSS Font-size

Ưu điểm:

  • Kiểm soát kích thước chữ hiển thị trên trang web
  • Tạo kích thước chữ đồng nhất cho các phần tử trong trang

Nhược điểm:

  • Có thể làm mất tính linh hoạt của thiết kế trang web
  • Khó khăn khi áp dụng với các kích thước màn hình khác nhau

Lời khuyên CSS Font-size

  • Nên sử dụng đơn vị tương đối để tạo tính linh hoạt cho thiết kế.
  • Nên sử dụng em thay vì pixel để đảm bảo tính tương thích và cải thiện khả năng phản hồi của trang web.

Tại sao nên sử dụng đơn vị em thay vì pixel?

Vì em có tính tương thích và khả năng phản hồi tốt hơn khi sử dụng trên các kích thước màn hình khác nhau.

Khi nào nên sử dụng font-size với pixels?

Khi muốn kiểm soát chính xác kích thước của chữ trong thiết kế.

Có thể áp dụng font-size cho mọi phần tử trên trang web không?

Có, font-size có thể áp dụng cho mọi phần tử trên trang web.

Có thể sử dụng đơn vị vw để đặt kích thước chữ không?

Có, đơn vị vw được sử dụng để đặt kích thước văn bản dựa trên kích thước của viewport.

Font-size with the length property có giới hạn chiều dài tối đa hay không?

Có, giá trị âm không được phép trong font-size with the length property.