[Web] Hiển thị font chữ chuẩn và không chuẩn trên trang web

1) Web safe font

Chắc hẳn với những bạn làm quen với lập trình web thì đều biết đến khái niệm Web safe font. Nói một cách đơn giản và dễ hiểu thì Web safe font là bộ mã font cho web có thể tương thích và hiển thị tốt ở tất cả các trình duyệt và làm việc tốt với PC cho dù nó cài đặt hệ điều hành nào, ứng dụng nào. Bây giờ, nếu bạn là một nhà phát triển website, mối quan tâm của bạn có thể là việc người dùng của bạn có thể đọc được nội dung bạn cung cấp cho dù đang duyệt web bằng hệ điều hành nào (Window, Mac hay Linux), trình duyệt nào đi chăng nữa.

Chúng ta bàn đến vấn đề này bởi nhiều nhà thiết kế web còn non kinh nghiệm cũng như chưa có một sự va chạm nhất định trong thực tiễn thường có thói quen cho phép cảm xúc thăng hoa bất chợt ở tất cả mọi nơi. Điều này dẫn đến nếu website được xem ở máy tính nhà thiết kế thì rất ư là đẹp, nhưng đến máy tính của người dùng thì….

Trong file CSS, các bạn chỉ cần khai báo loại Web safe font nào muốn sử dụng, ví dụ như sau:

.classname {
color: #333333;
font-family: Tahoma, Geneva, sans-serif;
}

Hoặc cũng có thể khai báo trực tiếp vào thẻ HTML

<p style="font-family: Tahoma, Geneva, sans-serif;">Hello World</p>

Một số loại Web safe font thông dụng :

 

 

 

 

Các bạn có thể tham khảo thêm một số Web safe font khác ở các bài viết dưới đây:

• http://www.w3schools.com/cssref/css_websafe_fonts.asp
• http://www.webdesigndev.com/web-development/16-gorgeous-web-safe-fonts-to-use-with-css
• http://sixrevisions.com/web_design/a-basic-look-at-typography-in-web-design/
• http://www.mightymeta.co.uk/209/introducing-the-web-safe-font-cheat-sheet

2) Hiển thị font không chuẩn

Nói như vậy không có nghĩa là các designer chỉ được sử dụng các loại Web safe font để trang trí cho trang web, tất cả đều có giải pháp cả, có điều hơi phức tạp như dùng thuộc tính @font-face, sIFR, Typeface.js, Cufon……mà tôi sẽ trình bày rõ hơn trong các bài viết tiếp theo. Một số topic, bài viết đề cập đến vấn đề trên:

• http://stackoverflow.com/questions/107936/how-to-add-some-non-standard-font-to-website
• http://www.howtoplaza.com/how-to-use-custom-fonts-on-your-website-with-css

Trong phần này tôi xin giới thiệu đến các bạn bài viết đề cập đến việc làm thế nào hiển thị font ngoài chuẩn trên web của tác giả Nguyễn Quang Yên, bằng cách sử dụng Google Font Directory và Google Font API. Các bạn có thể đọc bài viết đó để hiểu thêm tại địa chỉ sau :

http://sites.google.com/site/quangyendn/lap-trinh/hienthi-font-ngoaichuan-tren-trangweb

Ở phần này tôi chỉ giới thiệu một cách tổng quát một số cách để hiển thị font không chuẩn trên web, trong các bài viết tiếp theo tôi sẽ hướng dẫn cụ thể và chi tiết hơn. Thân ái!

3) Tham khảo

http://nhanweb.com