Hướng dẫn cách tùy biến font trên website
Posted on 20. May, 2011 by admin in Hướng dẫn
Bạn vào nhiều website thấy có nhiều font chữ lạ, độc đáo được trình bày ngay tại website đó(tại heading) mà không dùng ảnh. Bạn tự hỏi làm thế nào để có thể tùy biến font được như vậy? Bài viết này sẽ giới thiệu những cách phổ biến nhất để tùy biến font trên website sử dụng Google Font, Cufont…
Tùy biến font chữ trên web sử dụng Google Font
Không cần tải về và lưu font ở server của mình, không cần quá lo lắng về việc hiển thị, với Google Font API, công việc rất đơn giản: Tìm font trong thư viện, copy link vào trong phần head của website và sử dụng nó!
Ví dụ:
<head>
<link href='//fonts.googleapis.com/css?family=Calligraffitti' rel='stylesheet' type='text/css'>
<style>
h1 { font-family: 'Calligraffitti', arial, serif; }
</style>
</head>
Google Font hiển thị tốt cả trên các trình duyệt IE. Với cách sử dụng rất đơn giản này, chúc các bạn sẽ có nhiều website đẹp hơn với font chữ được tùy biến.
Nguồn bài viết: http://ntuts.com/huong-dan/tuy-bien-font-tren-web-voi-google-font-api
Tùy biến font chữ trên web sử dụng Cufont:
Bước 1 – Tạo font:
Trước hết, bạn cần download cufon, và sử dụng công cụ generator của Cufón để tạo và tùy biến cách mà font được thể hiện. Tôi rất ấn tượng với các lựa chọn mà Cufón cung cấp khi tạo font. Sau khi tạo xong bạn sẽ có được link download file javascript với các thông tin về font mà Cufón có thể đọc nó. (Ở đây tôi dùng font Comfortaa)
Bước 2: Thêm vào website
Thêm Cufón và font bạn vừa tạo vào website
Theo tôi bạn không nên chọn thay thế quá nhiều text trên website (nó sẽ tốn nhiều tài nguyên của client) mà chỉ nên chọn cho các tiêu đề chính. Để thay thế bạn thêm vào đoạn mã sau:
<script type=”text/javascript”>
Cufon.replace(‘#cufon-area h2, #cufon-area h3′);
</script>
Như vậy, các thẻ h2, h3 đã được áp dụng font chữ tùy biến.
Nguồn bài viết: http://ntuts.com/huong-dan/thay-the-font-su-dung-cufon
Chúc bạn thiết kế những website đẹp dựa trên hướng dẫn tùy biến font trên đây!
Từ khóa tìm kiếm:
cufon tieng viet, google font, font chu cho web, FONT TIẾNG VIỆT CHO WEB, font tren web
Advertisement