Học thiết kế web - làm website
- Mr.Tom
- June 28, 2012
- Học thiết kế web - làm website
- 5,139 views
Thiết kế website với font chữ có sẵn từ Google: webfont Google Font API
Dường như càng ngày gã khổng lồ Google càng không che giấu ý đồ muốn thống lĩnh mạng toàn cầu. Nếu bạn là một người thường xuyên cập nhật thông tin sẽ nhận thấy sản phẩm mang thương hiệu Google hiện diện khắp mọi nơi: Google Search Engine, Google Mail, Google Browser, Google Phone, Google OS, Google DNS,… Còn rất nhiều nữa mà Việt Coding nghĩ không cần thiết liệt kê hết ra ở đây. Ở lĩnh vực dành cho WebMaster Google cũng có những sản phẩm miễn phí thu hút rất nhiều người sử dụng như : Google Analytics, Webmaster Tools, FeedBuner, iGoogle, Reader, Website Optimizer, Blogger, Chart API, … và mới đây nhất là Google Font API được google công bố vào ngày 19/05/2010
Sử dụng Google Font API như thế nào?
Có thể nói so sánh với các phương pháp kể trên thì Google Font API có cách sử dụng đơn giản nhất, bạn chỉ cần thêm đoạn code sau vào trước thẻ <head>:
<link rel=”stylesheet” type=”text/css” href=”http://fonts.googleapis.com/css?family=ten-font-chu”/>
Bạn có thể tìm kiếm các font chữ tại http://code.google.com/webfonts
Muốn sử dụng nhiều font chữ thì thế nào?
Đơn giản thôi:
Cách 1:
<link rel=”stylesheet” type=”text/css” href=”http://fonts.googleapis.com/css?family=ten-font-chu1”/>
<link rel=”stylesheet” type=”text/css” href=”http://fonts.googleapis.com/css?family=ten-font-chu2”/>
<link rel=”stylesheet” type=”text/css” href=”http://fonts.googleapis.com/css?family=ten-font-chu3”/>
Cách này là cách con nít, ai mà chả biết.
Cách 2:
<link rel=”stylesheet” type=”text/css” href=”http://fonts.googleapis.com/css?family=font-chu1|font-chu2|font-chu3”>
Hoặc định dạng cho font chữ như đậm,:
<link rel=”stylesheet” type=”text/css” http://fonts.googleapis.com/css?family=Tangerine:bold,bolditalic|Inconsolata:italic|Droid+Sans”>
Nếu font chữ có chứa dấu cách (kí tự trắng, thì bạn thay thế bằng dấu cộng nhé.
Ví dụ:
<link rel=”stylesheet” type=”text/css” href=”http://fonts.googleapis.com/css?family=PT+Sans+Narrow”/>
Tức là font chữ: PT Sans Narrow
Và bạn đừng quên khai báo font-family trong CSS nhé:
.font-chu-dat-biet{
font-family: ‘PT Sans Narrow’, Arial;
font-size: 12px;
}
Qua thử nghiệm thì mình thấy Google Font API thể hiện font khá tốt trên các trình duyệt như IE6+, Firefox, Safari, Chrome, Opera. Kết hợp với các hiệu ứng của CSS3 nữa thì bạn sẽ có những thiết kế tuyệt vời nhưng vẫn tối ưu.
Tuy nhiên hiện tại số lượng font của Google Font API còn tương đối ít, và đáng tiếc là chưa hỗ trợ Unicode nên không thể hiện được tiếng Việt. Hi vọng rằng thư viện của Google Font API sẽ được lấp đầy bằng các font chữ đẹp và đặc biệt là hỗ trợ Unicode cho anh em webmaster Việt Nam.
Công ty thiết kế website, lập trình phần mềm NEVICOM
Bài viết khác:
- Hướng dẫn cách đưa webfont vào trang web của bạn. Thiết kế website với font chữ có sẵn
29/06/2012
- B2: Cách sử dụng CSS - cú pháp viết CSS
11/06/2012
- B1: Giới thiệu về CSS - Cascading Style Sheets - css là gì?
07/06/2012
- Kiến thức về HTML5 & CSS3 - Slide giới thiệu HTML5&CSS3
22/04/2012
- HTML5 - Tương lai ứng dụng web - Tìm hiểu cấu trúc HTML5
22/04/2012
- HTML5 - Sử dụng Web tuyệt vời hơn. Bắt đầu làm quen với HTML5
22/04/2012
- Bài 1. Giới thiệu về HTML
21/04/2012
Bình luận