thiet ke website,thiết kế website

Tin tức - Sự kiện » Thiết kế website »
Số lượt xem: 1863
Gửi lúc 01:39' 30/09/2011

Đôi điều về font size: pt, px, em và %.

Tôi có đọc qua  mấy comment quảng cáo trên blog của vnteam plus, thấy có một số đoạn code người ta hướng dẫn về chọn font và font-size. Và tôi hơi buồn cười khi có người nói rằng đoạn code có sử dụng font-size với giá trị kích cỡ là px nó chẳng khác gì đoạn code có sử dụng font-size với giá trị kích cỡ font là pt. Tôi chắc là anh bạn này không phân biệt được sự khác nhau giữa pt, px, em hay % trong phần thiết lập giá trị của thuộc tính font-size đâu nhỉ?

Thật ra nói về font và kích thước của chúng, thường chúng ta chỉ cần quan tâm đến hai loại đơn vị là pt và px, ems và % chỉ là 2 giá trị liên quan. Vậy pt và px có gì liên quan đến nhau, giống và khác nhau ở điểm nào?

Px là viết tắt của Pixel, như đã có lần tôi đề cập, đây là đơn vị điểm ảnh trên màn hình máy tí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 đó. Điều này có nghĩa là kích thước của mỗi pixel trên các màn hình có kích thước và độ phân giải khác nhau là không giống nhau. Còn pt là viết tắt của point, một đơn vị đo lường cơ bản dùng trong in ấn, một point có kích thước xấp xỉ bằng 1/72 inch, nhưng máy tính thường bỏ qua sự chênh lệch này và lấy chuẩn 1 point = 1/72 inch (1 inch = 2.54 cm). Điều này có nghĩa là kích thước của 1 point là cố định không thay đổi trên bất cứ màn hình nào, dù ở độ phân giải nào, luôn luôn là 1/72 inch. 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à 1024x768 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à 800x600 thì DPI là 56.25, có nghĩa là 1 px = 1.28 pt.

-- Vâng, nếu anh bạn kia có đọc được đến dòng này thì chắc chắn lần sau anh ta sẽ không dám khẳng định là 2 đoạn code về kích cỡ font có sử dụng px và pt là giống nhau nữa rồi =).


Vậy vấn đề đặt ra bây giờ là nên chọn lựa đơn vị kích thước nào cho font chữ thì hợp lý hơn?

Có thể có người cho rằng nên dùng pt, vì kích cỡ của font chữ không thay đổi trên mọi loại màn hình, và bạn muốn font chữ thể hiện như thế nào thì nó sẽ giữ đúng kích thước đấy. Thật ra cái này chỉ nên dùng đối với những trang web thuần text hay không có cấu trúc và bố cục đặc biệt gì, dạng như những trang tin tức và phần lớn là dành cho người có tuổi (vì họ thường thích đọc cỡ chữ to hơn một chút - với font-size là 12pt).
Còn đối với những trang web có cấu trúc phức tạp (xét về mặt code HTML và bố cục nhiều thành phần), người ta rất ít khi dùng pt để làm đơn vị kích thước cho font chữ. Vì đối với những máy tính có sử dụng màn hình với độ phân giải khác nhau, nếu font chữ không tự thích ứng mà vẫn giữ nguyên một kiểu thì rất dễ phá vỡ cấu trúc trang web, và đấy là điều tối kị đối với người thiết kế web site. Tất cả các thành phần trên một trang web đều xác định kích thước và vị trí dựa trên px, khi đó để đảm bảo bố cục tổng thể của chúng sẽ không thay đổi trên bất cứ độ phân giải nào, cỡ chữ cũng phải phù hợp với các thành phần khác, tức là cũng nên sử dụng đơn vị là px.

Cá nhân tôi cũng khuyến khích dùng đơn vị kích thước là px, và nên để giá trị là 12px hoặc 14px (đối với phần nội dung chính của bài), 16px hoặc 18px đối với các tiêu đề. Thêm một cái hay nữa của việc sử dụng đơn vị px là khi bạn thiết lập giá trị cho font chữ, bạn sẽ nhìn thấy chính xác cách thức văn bản được thể hiện trên trang web, chứ không như khi dùng pt - phụ thuộc vào độ phân giải và kích thước của màn hình.


Nói qua về các đơn vị mà tôi có đề cập đến ở đầu bài là em và % (percent), thật ra còn một số đơn vị kích thước khác như ex, pc, cm, mm và in.

Trong những đơn vị này, pc - cm - mm - in là những đơn vị có kích thước cố định, pc pica và có giá trị 1pc = 12pt = 1/6in (inch). Còn 3 đơn vị em - % - ex là những đơn vị thuộc dạng relative, tức là có liên quan đến một đơn vị khác hoặc là chính thiết lập mặc định của trình duyệt. Thông thường thiết lập font-size mặc định của trình duyệt là 16px, và khi đó:
                                                           1em = 16px, 1ex = 0.5em = 8px.
Nhưng nếu người dùng tự chỉnh sửa các thông số thiết lập này thì giá trị của những đơn vị trên sẽ khác đi. Còn %, cái này thì lại có liên quan đến cách thiết lập font-size bên trong file CSS. Giả sử trong file CSS bạn thiết lập kích thước font cho một số class như sau:

Code:

.bodytext {
font-size:16px;
}

.bodytext p {
font-size:75%;
}

.bodytext p .hd {
font-size:150%;
}


Class .bodytext có font-size là 16px, còn thẻ p nằm trong phần tử có style class .bodytext sẽ có font-size là:                                                  16px * 0.75 = 12px
Còn 
class .hd nằm trong thẻ p thuộc class .bodytext  sẽ có font-size là:
                                                                16px * 0.75*1.50 = 18px



Một vài lưu ý về font:

- Kích thước của font chỉ tính theo chiều dọc - độ cao của font chữ, còn bề ngang như thế nào thì hoàn toàn phụ thuôc vào kiểu font, hãy để ý điều này khi sử dụng một số font có bề ngang hơi rộng như kiểu font Verdana.

- Mặc dù trên lý thuyết việc set font-size theo đơn vị px là chuẩn xác nhất cho việc hiển thị trang web, nhưng thực tế do mỗi trình duyệt lại có một thiết lập mặc định riêng, cho nên đôi khi dù bạn đã set đầy đủ các giá trị cần thiết cho việc hiển thị font nhưng nhiều lúc vẫn không được như ý muốn. Và một số người đã thử chuyển từ px sang em, kết quả thu được rất khả quan, font chữ thể hiện chính xác hoặc gần như hoàn hảo những gì được thiết lập trong CSS. Và đây là 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. Đầu tiên ta thiết lập font-size cho toàn trang như sau (lưu ý đây chỉ là code sử dụng cho thiết lập font-size mặc định của trình duyệt là 16px):
Code:

body {font-size:62.5%;}


Khi đó kích thước của 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ữ đã trở nên đơn giản: 1.2em = 12px, 1.4em = 14px,... Như vậy ta có thể thiết lập đc chính xác sự hiển thị font chữ như mong đợi.

- Có một điểm lưu ý nữa khi sử dụng đơn vị là %, các trình duyệt không phải lúc nào cũng hiển thị như nhau. Giả sử như font-size:100% chẳng hạn,một số hiển thị không chính xác hoàn. Để khắc phục chuyện này một vài người lại có mẹo nhỏ là thay vì sử dụng 100%, họ sử dụng 100.01%. Đối với các trình duyệt hiểu được phần thập phân, thì 100% và 100.01% không khác nhau là bao nhiêu để có thể nhận ra sự khác biệt, còn đối với những trình duyệt bỏ qua giá trị của phần thập phân, 100.01% sẽ đc trả về giá trị 100% và thể hiện đúng như mong muốn.


Mong rằng sau bài này nhiều người sẽ hiểu rõ hơn về cách thiết lập các thông số của font để có thể tự chọn cho mình giá trị phù hợp, và đặc biệt là sẽ không có người nào kiến thức hời hợt đến mức có thể tự tin nói rằng "thiết lập font-size theo px và pt không có gì khác nhau cả" .



thiet ke webs pro,, thiết kế webs pro, thiet ke website pro, thiết kế website pro, Thietkewebsitepro,thiết kế web,thiet ke web,giao dien web,giao diện web
Share/Bookmark

Các tin mới



Các tin khác



Mua hàng Online!: (04)85.87.80.39
ban hang truc tuyen