CSS và font chữ

CSS và font chữ

Tôi thường chia font chữ (nói đúng hơn là typeface) thành 2 loại là font chữ đều (monospaced) và không đều. Trong font không đều tôi chia thành 2 loại chính là font có chân và font không chân. Ngoài ra có một số loại khác thường ít gặp hơn như font chữ viết tay (Script), các loại font đặc biệt khác như chữ khắc, khảm…

Font chữ đều thường không phổ biến lắm, nếu bạn là dân lập trình thì bạn sẽ tiếp xúc với loại font này hơn. Nó là loại font mà chiều ngang của tất cả các ký tự đều bằng nhau. Đơn giản bản so chiều ngang chữ mi chẳng hạn. Font đại diện và phổ biến nhất có thể kể đến là Courier New.

Font chữ không đều (Sans Serif) ngược lại với font chữ đều. Nó là loại phổ biến nhất và bạn thường xuyên gặp nó trong đời sống. Chiều ngang của các ký tự thường là khác nhau: mi.

Font có chân (Serif) thường thích hợp với các bản in trên giấy hoặc những tiêu đề có cỡ chữ to. Đại diện tiêu biểu là Times New Roman.
Font không chân thường thích hợp với các văn bản điện tử hoặc các chữ có kích cỡ nhỏ. Đại diện tiêu biểu là Arial.

Để sử dụng font trên trang html, bạn có thể dùng thẻ font và sử dụng thuộc tính face để chỉ định typeface nhưng cách này tôi không khuyên dùng. Bạn nên sử dụng css để thay thế và cách dùng như sau:

font-family: 'Tên font 1', 'Tên font 2', 'Tên font 3';
/* Không cần dấu ' hoặc " cũng được nhưng nên có nếu font có dấu cách */
/* Nếu trên máy client không có font 1 thì sẽ dùng font 2,
   font đứng trước được ưu tiên chọn hơn font đứng sau */

Đối với người thiết kế và phát triển web, việc hiển thị trang tại client đúng với thiết kế ban đầu là hết sức quan trọng. Sau đây tôi sẽ cũng cấp các số liệu thống kê về mức độ phổ biến của các font theo hệ điều hành. Đây là thông tin hữu ích sẽ giúp bạn đưa ra được lựa chọn tối ưu về font chữ cho trang web của mình:

Serif Sans Serif
Arial
font-family: Arial, “Helvetica Neue”, Helvetica, sans-serif;
Mac: 98.74%
Windows: 99.84%
Baskerville
font-family: Baskerville, “Baskerville Old Face”, “Hoefler Text”, Garamond, “Times New Roman”, serif;
Mac: 93.33%
Windows: 60.35%
Arial Black
font-family: “Arial Black”, “Arial Bold”, Gadget, sans-serif;’
Mac: 96.22%
Windows: 98.08%
Big Caslon
font-family: “Big Caslon”, “Book Antiqua”, “Palatino Linotype”, Georgia, serif;
Mac: 92.61%
Windows: 0.00%
Arial Narrow
font-family: “Arial Narrow”, Arial, sans-serif;
Mac: 94.77%
Windows: 88.39%
Bodoni MT
font-family: “Bodoni MT”, Didot, “Didot LT STD”, “Hoefler Text”, Garamond, “Times New Roman”, serif;
Mac: 0.00%
Windows: 55.81%
Arial Rounded MT Bold
font-family: “Arial Rounded MT Bold”, “Helvetica Rounded”, Arial, sans-serif;
Mac: 95.14%
Windows: 59.53%
Book Antiqua
font-family: “Book Antiqua”, Palatino, “Palatino Linotype”, “Palatino LT STD”, Georgia, serif;
Mac: 49.01%
Windows: 86.09%
Avant Garde
font-family: “Avant Garde”, Avantgarde, “Century Gothic”, CenturyGothic, “AppleGothic”, sans-serif;
Mac: 1.08%
Windows: 0%
Calisto MT
font-family: “Calisto MT”, “Bookman Old Style”, Bookman, “Goudy Old Style”, Garamond, “Hoefler Text”, “Bitstream Charter”, Georgia, serif;
Mac: 46.31%
Windows: 58.43%
Calibri
font-family: Calibri, Candara, Segoe, “Segoe UI”, Optima, Arial, sans-serif;
Mac: 38.74%
Windows: 83.41%
Cambria
font-family: Cambria, Georgia, serif;
Mac: 35.32%
Windows: 83.35%
Candara
font-family: Candara, Calibri, Segoe, “Segoe UI”, Optima, Arial, sans-serif;
Mac: 34.41%
Windows: 83.08%
Didot
font-family: Didot, “Didot LT STD”, “Hoefler Text”, Garamond, “Times New Roman”, serif;
Mac: 93.51%
Windows: 0.00%
Century Gothic
font-family: “Century Gothic”, CenturyGothic, AppleGothic, sans-serif;
Mac: 53.15%
Windows: 87.62%
Garamond
font-family: Garamond, Baskerville, “Baskerville Old Face”, “Hoefler Text”, “Times New Roman”, serif;
Mac: 49.91%
Windows: 86.47%
Franklin Gothic Medium
font-family: “Franklin Gothic Medium”, “Franklin Gothic”, “ITC Franklin Gothic”, Arial, sans-serif;
Mac: 2.10%
Windows: 99.18%
Georgia
font-family: Georgia, Times, “Times New Roman”, serif;
Mac: 97.48%
Windows: 99.40%
Futura
font-family: Futura, “Trebuchet MS”, Arial, sans-serif;
Mac: 94.41%
Windows: 1.26%
Goudy Old Style
font-family: “Goudy Old Style”, Garamond, “Big Caslon”, “Times New Roman”, serif;
Mac: 47.57%
Windows: 58.11%
Geneva
font-family: Geneva, Tahoma, Verdana, sans-serif;
Mac: 99.64%
Windows: 2.08%
Hoefler Text
font-family: “Hoefler Text”, “Baskerville old face”, Garamond, “Times New Roman”, serif;
Mac: 92.61%
Windows: 0.99%
Gill Sans
font-family: “Gill Sans”, “Gill Sans MT”, Calibri, sans-serif;
Mac: 95.50%
Windows: 58.54%
Lucida Bright
font-family: “Lucida Bright”, Georgia, serif;
Mac: 99.64%
Windows: 76.12%
Helvetica
font-family: “Helvetica Neue”, Helvetica, Arial, sans-serif;
Mac: 100.00%
Windows: 7.34%
Palatino
font-family: Palatino, “Palatino Linotype”, “Palatino LT STD”, “Book Antiqua”, Georgia, serif;
Mac: 86.13%
Windows: 99.29%
Impact
font-family: Impact, Haettenschweiler, “Franklin Gothic Bold”, Charcoal, “Helvetica Inserat”, “Bitstream Vera Sans Bold”, “Arial Black”, sans serif;
Mac: 95.14%
Windows: %
Perpetua
font-family: Perpetua, Baskerville, “Big Caslon”, “Palatino Linotype”, Palatino, “URW Palladio L”, “Nimbus Roman No9 L”, serif;
Mac: 0.00%
Windows: 66.54%
Lucida Grande
font-family: “Lucida Grande”, “Lucida Sans Unicode”, “Lucida Sans”, Geneva, Verdana, sans-serif;
Mac: 100.00%
Windows: 0.00%
Rockwell
font-family: Rockwell, “Courier Bold”, Courier, Georgia, Times, “Times New Roman”, serif;
Mac: 0.00%
Windows: 65.94%
Optima
font-family: Optima, Segoe, “Segoe UI”, Candara, Calibri, Arial, sans-serif;
Mac: 93.69%
Windows: 2.52%
Rockwell Extra Bold
font-family: “Rockwell Extra Bold”, “Rockwell Bold”, monospace;
Mac: 0.00%
Windows: 66.10%
Segoe UI
font-family: “Segoe UI”, Frutiger, “Frutiger Linotype
Mac: 0.00%
Windows: 75.36%
Times New Roman
font-family: TimesNewRoman, “Times New Roman”, Times, Baskerville, Georgia, serif;
Mac: 97.48%
Windows: 99.67%
Tahoma
font-family: Tahoma, Verdana, Segoe, sans-serif;
Mac: 91.71%
Windows: 99.95%
 
Trebuchet MS
font-family: “Trebuchet MS”, “Lucida Grande”, “Lucida Sans Unicode”, “Lucida Sans”, Tahoma, sans-serif;
Mac: 97.12%
Windows: 99.67%
 
Verdana
font-family: Verdana, Geneva, sans-serif;
Mac: 99.10%
Windows: 99.84%
 

 

Monospaced Others
Andale Mono
font-family: “Andale Mono”, AndaleMono, monospace;
Mac: 94.59%
Windows: 4.16%
Copperplate
font-family: Copperplate, “Copperplate Gothic Light”, fantasy;
Mac: 92.61%
Windows: 66.87%
Consolas
font-family: Consolas, monaco, monospace;
Mac: 34.77%
Windows: 82.97%
Papyrus
font-family: Papyrus, fantasy;
Mac: 92.43%
Windows: 70.37%
Courier New
font-family: “Courier New”, Courier, “Lucida Sans Typewriter”, “Lucida Typewriter”, monospace;
Mac: 95.68%
Windows: 99.73%
Brush Script MT
font-family: “Brush Script MT”, cursive;
Mac: 90.99%
Windows: 59.64%
Lucida Console
font-family: “Lucida Console”, “Lucida Sans Typewriter”, Monaco, “Bitstream Vera Sans Mono”, monospace;
Mac: 0.00%
Windows: 99.18%
 
Lucida Sans Typewriter
font-family: “Lucida Sans Typewriter”, “Lucida Console”, Monaco, “Bitstream Vera Sans Mono”, monospace;
Mac: 99.64%
Windows: 74.81%
 
Monaco
font-family: Monaco, Consolas, “Lucida Console”, monospace;
Mac: 99.82%
Windows: 2.74%
 

 
Với 2 bảng trên hi vọng sẽ giúp ích cho bạn khi chọn font chữ cho trang web.

Khi trích dẫn bài viết từ tek.eten.vn, xin vui lòng ghi rõ nguồn. Chúng tôi sẽ rất cảm ơn bạn!