Nhiều người khi học về HTML, CSS hay làm việc với chúng đều thấy một vấn đề khó hiểu đó là thuộc tính kích thước font chữ (font-size). Trong phương diện tin học ứng dụng, có nhiều đơn vị khác nhau mà bạn có thể dùng để khai báo kích thước font chữ khi nó được hiển thị trên màn hình, thông dụng nhất là px, pt, em và %, ngoài ra thì có pc, ex, in… Sẽ không có câu trả lời hoàn hảo cho câu hỏi: Sử dụng đơn vị nào là đúng?, vì mỗi đơn vị được dùng trong một hoàn cảnh khác nhau.
1. Px và Pt
Nhiều người hay nhầm lẫn hoặc cho rằng không có sự khác biệt giữa px, pt và em, điều đó thật sai lầm!
– px là chữ viết tắt của từ Pixel, là đơn vị điểm ảnh trên màn hình. Một pixel tương đương với một điểm trên màn hình máy tính, là đơn vị hiển thị nhỏ nhất trên màn hình. Số lượng điểm ảnh này phụ thuộc vào kích cỡ màn hình và độ phân giải (resolusion) của màn hình đó. Kích thước của một điểm ảnh cũng phụ thuộc vào kích thước màn hình và độ phân giải khác nhau thì không giống nhau.
– pt là chữ viết tắt của từ Point, là đơn vị được sử dụng trong in ấn. Một point xấp xỉ gần bằng 1/72 inch. Điều đó có nghĩa là kích thước 1 point là cố định dù trên bất cứ màn hình nào, độ phân giải nào. Thông thường với màn hình CRT 15″ (kích thước màn hình thật sự chỉ khoảng 14″2/9) và ở độ phân giải cao nhất là 1024×768 thì DPI là 96 – có nghĩa là 96 pixels trên 1 inch, tức là 1 px = 0.75 pt. Nhưng cũng màn hình đó nếu set về độ phân giải là 800×600 thì DPI là 56.25, có nghĩa là 1 px = 1.28 pt.
Vậy chúng ta sử dụng Px và Pt như thế nào?
– Theo kinh nghiệm của tôi thì với những trang web thuần text hoặc không có những bố cục phức tạp thì có thể dùng pt, kích thước chữ sẽ không thay đổi trên mọi màn hình. Bạn có thể dùng font-size = 12pt.
– Với những trang có HTML phức tạp thì nên dùng px, lí do là px thay đổi trên các màn hình khác nhau nên bố cục các thành phần sẽ không bị phá vỡ, đây là một điều rất quan trọng đối với người thiết kế web. Một chú ý là các thành phần trên web đều được đo bằng px.
2. em và %:
– em và % đều là đơn vị đo lường tương đối. 1 em và 100% sẽ bằng kích thước của font chữ hiện tại, ví dụ nếu font-size của tài liệu là 12pt thì 1em = 12pt = 100%.
– Gần đây, các thiết bị di động ra đời với các màn hình có độ phân giải rất lớn và ứng dụng web trên đó thì ngày càng nhiều, đòi hỏi font-size phải được thay đổi linh hoạt hơn nữa, người ta bắt đầu sử dụng % và em, nhưng 2 đơn vị này thì lại khó tưởng tượng, vì nó chỉ là tương đối.
– Có một cách đơn giản để sử dụng em mà không cần phải chi ly tính toán giá trị chính xác do cái tỉ lệ 1em = 16px gây ra. Ta sẽ thiết lập font-size toàn trang như sau: body {font-size:62.5%}, khi đó 1em sẽ là: 16(px)*0.625 = 10(px). Và như vậy thì việc tính toán kích cỡ của font chữ sẽ trở nên đơn giản: 1.2em = 12px, 1.4em = 14px,…
Xét về cơ bản, em và % là giống nhau. Nhưng xét về mặt…không cơ bản, em và % có khác nhau không? Câu trả lời là: CÓ
Có thể thấy, nếu text-size là trung bình thì không có sự khác biệt giữa em và %, nhưng khi thiết lập “smallest” và “Largest” thì sự khác biệt là quá rõ ràng.
3. em và rem:
Có 2 đơn vị em và rem luôn làm nhiều bạn nhầm lẫn, chưa nắm rõ nên sử dụng trong việc code khá là khó khăn.
Khái niệm về đơn vị em và rem
em: là đơn vị tham chiếu tỷ lệ so với phần tử cha trực tiếp chứa nó hoặc chính nó dựa vào giá trị của thuộc tính là font-size
rem: là đơn vị tham chiếu tỷ lệ so với phần tử gốc của website ở đây là thẻ <html> dựa vào giá trị của thuộc tính font-size
Giải thích chi tiết
Đầu tiên tạo html layout gồm có 1 div có class container bọc ngoài và có 2 div bên trong tương ứng với class em rem sau đó mình set cho thẻ <html> có thuộc tính font-size là 15px và lần lượt 2 ô là màu đỏ xanh cho các bạn dễ phân biệt.
Cho nên lúc này 1em = 1rem = 15px. Như các bạn nhìn vào demo ở trên thì 2 ô đều bằng nhau là 10(em-rem) x 15px = 150px của mỗi ô.
Do lúc này chính nó (class em) và phần tử cha chứa nó là thẻ div có class container chưa set thuộc tính font-size nên nó sẽ phụ thuộc phần tử lớn hơn ở ngoài đó là thẻ <body> nhưng thẻ <body> cũng chưa set thuộc tính font-size nên nó cứ thế lấy ra ngoài cùng cho tới thẻ <html>. Nên ở trên 1em = 1rem = 15px là theo thẻ <html>.
Bây giờ sẽ set thuộc tính font-size của thẻ div có class container là 20px, khi đó chắn chắn sẽ có thay đổi.
.container { font-size: 20px; }
Ô màu đỏ có đơn vị em sẽ to hơn ban đầu vì như đã nói ở trên là đơn vị em phụ thuộc vào giá trị thuộc tính font-size của chính nó hoặc phần tử cha trực tiếp chứa nó. Cho nên lúc này ô màu đỏ sẽ có kích thước là 10em x 20px = 200px.
html { font-size: 25px; }
Còn ô màu xanh(rem) do phụ thuộc vào thẻ <html> nên khi thay đổi giá trị font-size của thẻ <html> sang 25px thì ô màu xanh cũng sẽ thay đổi kích thước. Và lúc này giá trị của nó sẽ là 10rem x 25px = 250px. Nhìn vào demo bạn sẽ thấy nó to hơn ban đầu và to hơn ô màu đỏ.
Một vài kết luận
- Pt là cố định, không thay đổi trên mọi màn hình trong khi px thì thay đổi trên các màn hình có kích thước và phân giải khác nhau. Em và % là các đơn vị đo tương đối.
- Px là đơn vị đo phổ biến hiện nay, và được coi là “chấp nhận được”, người dùng có thể dùng chức năng zoom trên trình duyệt để thay đổi kích thước font. Font-size phù hợp cho văn bản thường là 12px.
- Các màn hình của thiết bị di động có độ phân giải rất lớn, khi đó font-size = 12px lại trở lên quá nhỏ để có thể đọc được, em và % sẽ là giải pháp cho trường hợp này.
