Thay thế font sử dụng Cufón
Nếu đã từng thiết kế web, bạn sẽ biết về hạn chế khi sử dụng font chữ. Cũng vì thế có rất nhiều phương pháp khắc phục nhược điểm này (sIFR là một phương pháp được nhiều người biết tới). Hôm nay tôi xin giới thiệu với các bạn một cách làm khác: dùng Cufón.
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 Cufón và font bạn vừa tạo
Thêm Cufón và font bạn vừa tạo vào website
<script type="text/javascript" src="js/cufon-yui.js"></script> <script type="text/javascript" src="js/Comfortaa_400.font.js"></script>
Bước 3: Chọn các phần thay thế
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>
Tôi thích sử dụng Cufón hơn là sIFR, còn bạn thì sao?
Bạn có thể tham khảo thêm 34 thiết kế sáng tạo với Cufón
Neo
Nhìn mặt trời từ năm 1984 nhưng tới tận 2002 mới được thấy cái máy tính đầu tiên của mình. Đầu năm 2007 thì quyết định theo cái nghề cao quý là thiết kế web 
. Hiện mình đang sống tại Hà Nội. Sở thích: làm website và giúp đỡ mọi người phát triển website theo chiều hướng tốt đẹp hơn.
Bình luận
Font chữ Việt (not verified)
Cách này khá hay nhưng sẽ ảnh hưởng đến SEO nếu thay thế các tiêu đề chính bác ah.
Neo
Không hề ảnh hưởng mà. Cái này dùng javascript để thay thế text. Bạn có thể view source của trang demo để thấy rõ (các máy tìm kiếm chỉ đọc file html mà không render javascript như trình duyệt)
Và với font hỗ trợ unicode thì mình vẫn có thể replace tiếng Việt bình thường
smartosc (not verified)
hello .
Bạn có thể nói rõ hơn về ưu điểm và nhược điểm của nó đươc không?
ví dụ: - Nó có support tất cả các thuộc tính của css về font không ? {letter-spacing, text-transform , text-decoration,.....}
- Nó có support trên tất cả các browser ko ?.
Neo
- Mình vừa update demo để bạn thấy rõ hơn. Cufón support đầy đủ các thuộc tính của CSS và phần lớn browser (mình chưa test ở IE 5.5 ^^)
smartosc (not verified)
hello ,
Tớ chạy demo của bạn trên IE6 nhưng mà nó không hiển thị font đặc biệt . ec ec
smartosc (not verified)
hi
Bạn có thể cho tui download demo của bạn không ? Tui làm cái text nó cứ mờ không được sắc nét như của bạn
cảm Ơn
Neo
đây là link file download http://vannyneo.com/demo/download/cufon.zip
Mình làm cái này đúng như hướng dẫn bên trên thôi
Neo
Mới phát hiện Cufon ko chạy ở FireFox2
Minhtc (not verified)
Bán có thể hướng dẫn cụ thể từ bước 2 trở đi giúp mình không? Cụ thể là chèn doạn code trên vào những file nào trong bước 2 và 3. Thanks
Neo
Bạn có thể tham khảo file demo http://vannyneo.com/demo/download/cufon.zip
Đoạn code ở bước 2 và 3 chèn vào file html hoặc file php cần áp dụng cufón
phucvh (not verified)
cai' nay` minh da thu dung roi`
Cufont co' 1 han che' la ko ho tro Copy and Paste Text
Trong khi do' thi` SIFR ho tro hoan` toan`
duknguyen (not verified)
Cảm ơn Nam, bài viết rất ý nghĩa!
Khách (not verified)
mấy anh nói sau chứ, tui xài cái themes Lightword nó cứ đụng cái font hoài, làm cái tiêu đề không hiển thị được tiếng việt, quân sư nào help cái....
Neo
Lightword sử dụng vera font, font này ko support unicode nên không hiển thị được mà. Tốt nhất cậu nên chuyển lại thành font arial để dùng
Khách (not verified)
hehe ,... mò mẫm 1 lát phát hiện cái quá dễ làm chi khó khăn lên wordpress tìm cái plugin WP-Cufon về xài. Nhanh gọn lệ...thanks Neo
Post new comment