Các đơn vị dùng cho font chữ trên máy tính

(Bài viết dành nhiều hơn cho các bạn tìm hiểu về làm web)

Một trong những điều dễ khiến ta bối rối khi định nghĩa css là áp dụng các thuộc tính của font-size cho việc co giãn chữ. Với CSS, bạn có 4 đơn vị khác nhau để định kích thước chữ cho việc hiển thị trên trình duyệt. Vậy đơn vị nào là phù hợp nhất cho web ? Câu hỏi này đã tạo nên nhiều làn sóng thảo luận, tranh cãi. Việc tìm kiếm câu trả lời thỏa đáng có thể khó khăn, bởi câu hỏi, tự nó đã khó để trả lời.

TÌM HIỂU VỀ CÁC ĐƠN VỊ:

  1. “Ems” (em): “em” là đơn vị có khả năng co giãn được sử dụng cho tài liệu truyền thông web. 1em ngang bằng với font-size hiện tại, ví dụ, nếu font-size của tài liệu là 12pt, 1em = 12pt. Ems được co giãn theo tỉ lệ, vì thế 2em = 24pt, .5em = 6pt, v.v… Ems đang trở nên phổ biến trên website do khả năng co giãn và thân thiện với thiết bị di động.
  2. Pixels (px): Pixels là đơn vị cố định, được sử dụng trong các màn hình truyền thông (ví dụ: để đọc trên màn hình máy tính). 1px tương đương 1 chấm (dot) trên màn hình máy tính (đơn vị nhỏ nhất của độ phân giải màn hình.). Nhiều người thiết kế web sử dụng pixel trên website để tạo nên website hiển thị hoàn hảo với các điểm ảnh trên trình duyệt. Vấn đề của pixel là không phóng to cho người đọc có thị lực yếu hay co lại để phù hợp với thiết bị di động.
  3. Points (pt): Pt được sử dụng trong in ấn (bất kì những gì được in trên giấy) 1pt =1/72 inch. Pt khá giống vớt px ở điểm chúng là đơn bị cố định và không thể co giãn.
  4. Percent (%): Đơn vị % hầu như là giống với “em”, ngoại trừ 1 vài khác biệt cơ bản. Đầu tiên và quan trọng nhất, font-size = 100% (vd: 12pt=100%). Khi sử dụng %, văn bản của bạn hoàn toàn có khả năng co giãn cho thiết bị mobile.

VẬY, ĐIỂM KHÁC BIỆT LÀ GÌ ?

Sẽ dễ dàng để hiểu sự khác biệt giữa các đơn vị font-size hơn khi bạn nhìn thấy chúng trực tiếp. Nói chung, 1em = 12pt = 16px = 100%. Khi sử dụng các font-size, hãy xem điều gì xảy ra khi bạn tăng kích thước font cơ bản (bằng cách sử dụng css) từ 100% lên 120%.

Như bạn có thể thấy, cả em và % đã lớn hơn font cơ bản nhưng px và pt thì không. Thiết lập 1 kích thước tuyệt đối cho văn bản là dễ dàng, nhưng nó sẽ dễ hơn nữa cho khách hàng của bạn để dùng font chữ có thể co giãn để hiển thị trên bất kì thiết bị hay máy móc nào khác. Vì lý do này, em và % là đươn bị hoàn hảo hơn cho văn bản web.

EM và PERCENT

Chúng ta đã quyết định pt và px không phải là phù hợp nhất cho tài liệu web, vậy sẽ còn em và %. Trên lý thuyết, cả em và % giống nhau, nhưng khi áp dụng, chúng thực sự có 1 vài khác biệt nhỏ quan trọng để xem xét.

Ở ví dụ trên, chúng ta sử dụng % như font-size cơ bản (ở body tag). Nếu bạn đổi font-size cơ bản từ % sang ems (vd: body f{ont-size: 1em;}), có thể bạn không nhận thấy sự khác biệt. Hãy xem điều gì xảy ra khi “1em” là font-size cơ bản, và người dùng thay đổi thiết lập “font-size” trên trình duyệt của họ (điều này tồn tại ở 1 số trình duyệt như IE)

Khi trình duyệt khách có kích thước chữ được gán là “medium”, không có gì khác biệt giữa ems và %. Tuy nhiên khi thiết lập thay đổi, sự khác biệt là khá lớn. Ở thiết lập “Smallest”, ems nhỏ hơn nhiều so với %. Trong khi đó có 1 vài tranh luận rằng ems được co lại chính xác, trên thực tế, ems co lại quá nhỏ, hầu như không đọc được trên 1 vài thiết bị của khách.

KẾT LUẬN:

Trên lý thuyết, ems dần trở thành font chữ chuẩn cho website, nhưng trên thực tế, % cung cấp nhiều sự nhất quán và khả năng hiển thị cho người dùng hơn. Khi thiết lập có sự thay đổi, chữ % co giãn theo tỉ lệ hợp lý, cho phép người thiết kế đảm bảo khả năng đọc, tiếp cận và thiết kế trực quan.

Chiến thắng là: percent (%)

Cập nhật (Tháng 1/2011)

Sau một vào năm, tôi muốn tổng hợp lại cái các thảo luận và tranh luận xảy ra trong thời gian đó. Nhìn chung, khi tôi tạo một bản thiết kế mới, tôi sẽ sử dụng % ở thẻ body (body{font-size:62.5%;} ), rồi dùng ems để đặt các kích cỡ từ đó. Khi body được gán %, bạn có thể chọn để dùng cả % và ems cho bất kỳ css khác và vẫn giữ được lợi ích của việc dùng % như là font-size cơ bản của bạn. Vài năm gần đây, điều này thực sự trở thành tiêu chuẩn trong thiết kế.

Px hiện giờ được xem là đơn vị có thể chấp nhận được (người cùng có thể sử dụng tính năng “zoom” để đọc các chữ nhỏ hơn), mặc dù chúng gây ra 1 số vấn đề như kết quả của thiết bị di động có mật độ điểm ảnh rất cao (vài thiết bị lên tới 200 – 300 px/inch đến 2016 là 300-400) điều đó khiến cho kích thước 11-12px trở nên khó nhìn hơn. Kết quả là, tôi vẫn sẽ tiếp tục sử dụng % như kích thước cơ bản trên web. Như mọi khi, thảo luận và tranh luận luôn được khuyến khích và chờ đón; cảm ơn tất cả những phản hồi tuyệt vời trong suốt 2 năm qua !

Tác giả: Kyle Schaeffer
Dịch: Moonbeam

Nguồn: http://kyleschaeffer.com/development/css-font-size-em-vs-px-vs-pt-vs/

Advertisements

Trả lời

Mời bạn điền thông tin vào ô dưới đây hoặc kích vào một biểu tượng để đăng nhập:

WordPress.com Logo

Bạn đang bình luận bằng tài khoản WordPress.com Đăng xuất / Thay đổi )

Twitter picture

Bạn đang bình luận bằng tài khoản Twitter Đăng xuất / Thay đổi )

Facebook photo

Bạn đang bình luận bằng tài khoản Facebook Đăng xuất / Thay đổi )

Google+ photo

Bạn đang bình luận bằng tài khoản Google+ Đăng xuất / Thay đổi )

Connecting to %s