Home
News
Latest images
Search
Register
Log in
Hướng dẫn Cufon toàn tập - 2
Tường nhà
Bài viết
Kết bạn
Tài sản
rong [You must be registered and logged in to see this link.], chúng ta đã lần lượt theo các bước và đã có trong tay bộ font Cufón ở định dạng JavaScript (UTM_Flamenco_400.font.js). Ở phần 2 này, chúng ta sẽ từng bước tích hợp Cufón vào một tập tin HTML đơn giản để qua đó thấy được tác dụng của nó.
Phần 2: Nhúng Cufón vào website thông thường
Đầu tiên, chúng ta tạo một thư mục Cufon Demo, trong đó tạo một file index.html có nội dung cơ bản như sau:
[You must be registered and logged in to see this link.]Trang HTML bình thường chưa tích hợp Cufón
Đã có trong tay tập tin js của font muốn dùng chưa đủ, chúng ta cần thêm một tập tin js của riêng Cufón nữa là cufon-yui.js ([You must be registered and logged in to see this link.])
Trong thư mục Cufon Demo, tạo một thư mục con là js và copy 2 file UTM_Flamenco_400.font.js, cufon-yui.js vào.
[You must be registered and logged in to see this link.]Hai tập tin cần thiết cho Cufón
Quay trở lại màn hình soạn thảo nơi chúng ta vừa tạo tập tin
index.html. Chèn thêm dòng code dưới đây vào phần thẻ HEAD của trang:
Tiếp tục chèn tiếp đoạn mã này vào trước thẻ đóng BODY
Save lại và xem thành quả vừa làm được:
[You must be registered and logged in to see this link.]Font đã đổi theo UTM-Flamenco
Chúng ta thêm vào một chút Css để xem thế nào nhé:
Và đây là toàn bộ nội dung tập tin index.html
Phần 2: Nhúng Cufón vào website thông thường
Đầu tiên, chúng ta tạo một thư mục Cufon Demo, trong đó tạo một file index.html có nội dung cơ bản như sau:
- Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[url=http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd[/url]">
<html xmlns="[url=http://www.w3.org/1999/xhtml]http://www.w3.org/1999/xhtml[/url]">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Cufón Demo</title>
</head>
<body>
<h1>Chào mừng các bạn đến với Cufón demo</h1>
<h2>Chào mừng các bạn đến với Cufón demo</h2>
<h3>Chào mừng các bạn đến với Cufón demo</h3>
<h4>Chào mừng các bạn đến với Cufón demo</h4>
<h5>Chào mừng các bạn đến với Cufón demo</h5>
<h6>Chào mừng các bạn đến với Cufón demo</h6>
</body>
</html>
[You must be registered and logged in to see this link.]Trang HTML bình thường chưa tích hợp Cufón
Đã có trong tay tập tin js của font muốn dùng chưa đủ, chúng ta cần thêm một tập tin js của riêng Cufón nữa là cufon-yui.js ([You must be registered and logged in to see this link.])
Trong thư mục Cufon Demo, tạo một thư mục con là js và copy 2 file UTM_Flamenco_400.font.js, cufon-yui.js vào.
[You must be registered and logged in to see this link.]Hai tập tin cần thiết cho Cufón
Quay trở lại màn hình soạn thảo nơi chúng ta vừa tạo tập tin
index.html. Chèn thêm dòng code dưới đây vào phần thẻ HEAD của trang:
- Code:
<script type="text/javascript" src="js/cufon-yui.js"></script>
<script type="text/javascript" src="js/UTM_Flamenco_400.font.js"></script>
Tiếp tục chèn tiếp đoạn mã này vào trước thẻ đóng BODY
- Code:
<script type="text/javascript">
Cufon.replace('h1');
Cufon.replace('h2');
</script>
Save lại và xem thành quả vừa làm được:
[You must be registered and logged in to see this link.]Font đã đổi theo UTM-Flamenco
Chúng ta thêm vào một chút Css để xem thế nào nhé:
- Code:
<style type="text/css">
h1 {color:green;}
h3 {color:orange;}
</style>
Và đây là toàn bộ nội dung tập tin index.html
- Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[url=http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd[/url]">
<html xmlns="[url=http://www.w3.org/1999/xhtml]http://www.w3.org/1999/xhtml[/url]">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Cufón Demo</title>
<script type="text/javascript" src="js/cufon-yui.js"></script>
<script type="text/javascript" src="js/UTM_Flamenco_400.font.js"></script>
<style type="text/css">
h1 {color:green;}
h3 {color:orange;}
</style>
</head>
<body>
<h1>Chào mừng các bạn đến với Cufón demo</h1>
<h2>Chào mừng các bạn đến với Cufón demo</h2>
<h3>Chào mừng các bạn đến với Cufón demo</h3>
<h4>Chào mừng các bạn đến với Cufón demo</h4>
<h5>Chào mừng các bạn đến với Cufón demo</h5>
<h6>Chào mừng các bạn đến với Cufón demo</h6>
<script type="text/javascript">
Cufon.replace('h1');
Cufon.replace('h3');
</script>
</body>
</html>
