Quan trọng
Đăng ngày: 07:07 05-06-2008
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 là 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):
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ả" 
.
Author: m3Noa - 05 Jun, 2008 - Copyright © 2008.
*Please ask for permission before copying this.
thienthancuatoi 16:02 06-10-2009
Blog của em thuộc dạng "gà" bài viết của "sư tỉ" đã giúp em hiểu thêm về cách tạo blog(font). Chúc "sư tỉ" có 1 ngày tốt đẹp và có nhìu bài viết hay như vậy!
ducsbv 09:28 28-06-2009
Cảm ơn bạn nhiều, cho mình hỏi thêm chút, để đổi font và cỡ chữ của tiêu đề của bài viết rút gọn thì đổi thế nào nhỉ?
Noa09:21 30-06-2009
ducsbv 23:11 26-06-2009
cho mình hỏi nếu muốn thay đổi cỡ chữ của tiêu đề bài viết có được không nhỉ?
Noa02:10 28-06-2009
Thay N bằng giá trị số thích hợp.
tjnhh0kd0jth4y_loveyou 18:47 24-06-2009
anh oy cho em hoi kaj' sao sau khj lam theme trong suot' em viet' baj blog entry th`y chu? no' laj den zj` dj ak. hok nhj`n thay' rj ca? trong khj baj entry do' em da? thaymau roi ma`````````````````` kon xem blog cua? cac' ban 3 t`hy ma`u entry hok p? la mau den anh vao blog em giup' em kaj' na`u anh oy chan' wua'a `k
Noa21:32 24-06-2009
AnhMsc 19:51 13-06-2009
Sáp [BQT Write Plus] 08:02 11-06-2009
P/s Noa: Mình chỉ theo kinh nghiệm mà viết ra thôi, không phải từ trong sách vở. Nên có sai sót gì cũng đừng xóa tên mình trong friends list mà tội
Vni 04:27 09-06-2009
Thanks :)
Vni 18:57 08-06-2009
Mình muốn làm cho font-size của phần comment nhỏ hơn font của entry một chút!
surprise_pl 16:56 29-03-2009
minh muon ghe nha ban hoc hoi thuong xuyen do
mong ban gop y cho blog cua minh nhe
vi bo cuc blog cua to cu lon xon the nao ay
mong ban ghe va cho y kien phai lam nhu the nao nhe
thanks
Mr.Rồ 12:34 02-02-2009
hieuthaoster 11:25 14-11-2008
vuquochuy 23:38 30-10-2008
Noa03:09 31-10-2008
LaNesRa 18:48 29-08-2008
LaNesRa 23:17 28-08-2008
chỗ này nè a (clik > view full)
Noa17:33 29-08-2008
LaNesRa 17:48 27-08-2008
Noa20:04 28-08-2008
cupidnhung 18:36 23-08-2008
[the^' jo*j' Mr'...&MisS]-Mr'Q91 15:53 05-08-2008
blog U hay wa''
da~ giup' mjn` ra^t' nhju`!! thank nhe
jenguyen 09:58 11-06-2008
kokotsk2003 05:23 07-06-2008
ban xem wa thong so ng` truy cap hoac profile fai hok ? :D
Luna'Boy 04:46 06-06-2008
Noa Noa
cóa cái ikon nào đẹp đẹp hem ? send tớ làm ikon dẫn link tới plus của Noa cho đẹp :"P
Noa10:27 06-06-2008
Luna'Boy 04:40 06-06-2008
tớ đặt blog của Noa vào cột quảg cáo nè ;))
Luna'Boy 04:39 06-06-2008
hihi
useful entry :">
kokotsk2003 04:07 06-06-2008
minh` song o Anh.mu sao bn bit hay zay? :D
Noa10:27 06-06-2008
co0l.l0ve 23:23 05-06-2008
Noa00:04 06-06-2008
[W].Dephia 15:05 05-06-2008
Noa15:15 05-06-2008
body {font-size:100%;}
vào CSS là biết ngay giá trị mặc định là bao nhiêu =).
[W].Dephia 14:44 05-06-2008
Noa14:51 05-06-2008
[W].Dephia 12:07 05-06-2008
Noa14:33 05-06-2008
kokotsk2003 09:05 05-06-2008
Noa14:31 05-06-2008
Btw, bạn đang sống ở Anh à