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:
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><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> |
Xem thử file index thấy như sau:
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 (download)
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.
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:
1
2
| <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
1
2
3
4
| <script type="text/javascript"> Cufon.replace('h1'); Cufon.replace('h2'); </script> |
Save lại và xem thành quả vừa làm được:
Font đã đổi theo UTM-Flamenco
Chúng ta thêm vào một chút Css để xem thế nào nhé:
1
2
3
4
| <style type="text/css"> h1 {color:green;} h3 {color:orange;}</style> |
Font với màu sắc
Và đây là toàn bộ nội dung tập tin index.html
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><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> |
0 nhận xét:
Đăng nhận xét