Sử dụng Ems để thay đổi kích thước phông chữ
Khi bạn xây dựng một trang web, hầu hết các chuyên gia khuyên bạn nên kích thước phông chữ (và trên thực tế, mọi thứ) với một thước đo tương đối như ems, exs, percentages, hoặc pixel. Điều này là do bạn thực sự không biết tất cả các cách khác nhau mà ai đó có thể xem nội dung của bạn. Và nếu bạn sử dụng một biện pháp tuyệt đối (inch, cm, mm, điểm, hoặc picas) nó có thể ảnh hưởng đến hiển thị hoặc khả năng đọc của trang trong các thiết bị khác nhau.
Và W3C khuyên bạn nên sử dụng ems cho các kích cỡ.
Nhưng How Big là một đứa trẻ?
Theo W3C một em:
"bằng với giá trị được tính của thuộc tính 'kích thước phông chữ' của phần tử mà nó được sử dụng. Ngoại lệ là khi 'em' xuất hiện trong giá trị của thuộc tính 'kích thước phông chữ', trong trường hợp nó đề cập đến với kích thước phông chữ của phần tử gốc ".
Nói cách khác, ems không có kích thước tuyệt đối. Họ đưa vào giá trị kích thước của họ dựa trên nơi họ đang có. Đối với hầu hết các nhà thiết kế web , điều này có nghĩa là họ đang ở trong một trình duyệt Web, do đó, một phông chữ cao 1em có cùng kích thước với kích thước phông chữ mặc định cho trình duyệt đó.
Nhưng kích thước mặc định là bao nhiêu? Không có cách nào chắc chắn 100%, vì khách hàng có thể thay đổi kích thước phông chữ mặc định trong trình duyệt của họ, nhưng vì hầu hết mọi người không bạn có thể giả định rằng hầu hết các trình duyệt đều có kích thước phông chữ mặc định là 16px. Vì vậy, hầu hết thời gian 1em = 16px .
Suy nghĩ về pixel, sử dụng số đo cho số đo
Khi bạn biết rằng kích thước phông chữ mặc định là 16px, bạn có thể sử dụng ems để cho phép khách hàng của bạn thay đổi kích thước trang dễ dàng nhưng suy nghĩ theo pixel cho kích thước phông chữ của bạn.
Giả sử bạn có cấu trúc kích thước như sau:
- Dòng tiêu đề 1 - 20px
- Dòng tiêu đề 2 - 18px
- Dòng tiêu đề 3 - 16px
- Văn bản chính - 14px
- Văn bản phụ - 12px
- Chú thích - 10px
Bạn có thể định nghĩa chúng theo cách đó bằng cách sử dụng pixel cho phép đo, nhưng sau đó bất kỳ ai sử dụng IE 6 và 7 sẽ không thể thay đổi kích thước trang của bạn tốt. Vì vậy, bạn nên chuyển đổi kích thước thành ems và đây chỉ là vấn đề của một số toán học:
- Dòng tiêu đề 1 - 1,25 (16 x 1,25 = 20)
- Dòng tiêu đề 2 - 1.125em (16 × 1,125 = 18)
- Dòng tiêu đề 3 - 1em (1em = 16px)
- Văn bản chính - 0.875em (16 x 0.875 = 14)
- Văn bản phụ - 0,75em (16 x 0,75 = 12)
- Chú thích - 0.625em (16 x 0.625 = 10)
Đừng quên thừa kế!
Nhưng đó không phải là tất cả để có ems. Một thứ khác bạn cần nhớ là chúng chiếm kích thước của bố mẹ. Vì vậy, nếu bạn có các yếu tố lồng nhau với các kích thước phông chữ khác nhau, bạn có thể kết thúc bằng một phông chữ nhỏ hơn nhiều hoặc lớn hơn bạn mong đợi.
Ví dụ: bạn có thể có một biểu định kiểu như sau:
p {font-size: 0.875em; }
.footnote {font-size: 0.625em; }
Điều này sẽ dẫn đến các phông chữ có kích thước 14px và 10px đối với văn bản chính và chú thích tương ứng. Nhưng nếu bạn đặt một chú thích bên trong một đoạn văn, bạn có thể kết thúc với văn bản là 8.75px thay vì 10px. Hãy tự mình thử, đặt CSS ở trên và HTML sau vào tài liệu:
Phông chữ này có chiều cao 14px hoặc 0.875 ems.
Đoạn này có một chú thích trong đó.
Trong khi đây chỉ là một đoạn chú thích.
Các văn bản chú thích là khó đọc ở 10px, nó gần như không đọc được ở 8,75px.
Vì vậy, khi bạn đang sử dụng ems, bạn cần phải rất ý thức về kích thước của các đối tượng cha mẹ, hoặc bạn sẽ kết thúc với một số yếu tố thực sự có kích thước lẻ trên trang của bạn.