Thiết kế website với font chữ có sẵn từ Google: webfont Google Font API

Trang chủ Danh mục bài viết Học thiết kế web - làm website

Học thiết kế web - làm website

Mr.Tom
June 28, 2012
Học thiết kế web - làm website
4,926 views

Thiết kế website với font chữ có sẵn từ Google: webfont Google Font API

Khi thiết kế website, bạn muốn sử dụng những font đặc biệt để thể hiện website theo phong cách riêng, nhưng không phải máy người dụng nào cũng có những font đó nên dẫn đến kết quả là việc thể hiện website không được chính xác ở tất cả các máy tính.

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.