Thay thế font hoàn hảo với Cufón

Chắc hẳn bạn đã từng một lần sử dụng sFIR (Scalable Inman Flash Replacement) khi thiết kế những Website để tạo ra những phong cách typography ấn tượng. Còn nếu ai chưa từng sử dụng thì có thể hiểu sFIR nôm na là cách sử dụng Flash để thay thế và hiển thị text trên website. Dễ hiểu hơn nữa thì như sau, bạn muốn website của mình sử dụng một font chữ bay bổng, ấn tượng nào đó, nhưng để người xem nhìn được font đó thì trên máy tính của người đó phải cài font đó rồi, do đó sFIR ra đời để vẫn có thể hiện thì font theo ý muốn mà không cần biết máy người dùng đã cài font đó hay chưa.

Khi sử dụng sFIR thì một trở ngại duy nhất đó là trình duyệt phải cài Flash Plugin. Nếu Flash plugin không cài thì mọi thứ chúng ta làm đều về mo hết. Để giải quyết những khó khăn đó Cufon đã được ra đời, với chức năng giống với sFIR nhưng khác ở chỗ Cufon không sử dụng Flash mà đơn thuần chỉ sự dụng JavaScript để render font với Canvas hoặc VML. Do vậy khi sử dụng Cufon chúng ta có thể chạy được hầu hết các trình duyệt phổ biến hiện nay.

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 Cufon 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>

Nói thêm chút khi sinh file js từ một file font, chúng ta chỉ nên chọn những tập hợp ký tự mà mình sử dụng, vì nếu chọn tất cả các ký tự sẽ làm file js trở nên phình to, lúc load trang web sẽ ảnh hưởng đến tốc độ. Tập hợp ký tự tiếng Việt của chúng ta được mình gom lại dưới đây.

àáạảãâầấậẩẫăằắặẳẵèéẹẻẽêềếệểễìíịỉĩòóọỏõôồốộổỗơờớợởỡùúụủũưừứựửữỳýỵỷỹđÀÁẠẢÃÂẦẤẬ
ẨẪĂẰẮẶẲẴÈÉẸẺẼÊỀẾỆỂỄÌÍỊỈĨÒÓỌỎÕÔỒỐỘỔỖƠỜỚỢỞỠÙÚỤỦŨƯỪỨỰỬỮỲÝỴỶỸĐ

Demo

Demo của vannyneo
Demo của huyvq’s blog
Cufon – giải pháp thay thế sFIR
Thay thế font sử dụng Cufón

Còn đây là một số ý kiến (trích từ Hutek)

- Có thể nó là Cufón làm rất tốt nhiệm vụ của mình, hoạt động tốt với các trình duyệt và load khá nhanh.
- Có một vấn đề là để đỡ rắc rối thì chúng ta nên dùng font unicode để thay thế với Cufón nhưng nguồn font Unicode đẹp thì rất hiếm, nhưng may mắn cho các bạn là mình cũng vừa tìm được một trang có rất nhiều font đẹp đó là fontchudeputm.blogspot.com. Ở đây các font đều là font Unicode nên bạn có thể tha hồ chọn cho mình một font ưng ý.
- Một vấn đề nữa là các bạn nếu ko quen thì sẽ hơi lúng túng trong việc tạo file js của font cần thay thế, nếu vậy thì các bạn có thể xem hình sau để rõ hơn

Cufón Generate

- Một vấn đề cũng không kém phần quan trọng xin được khẳng định là dùng Cufón không ảnh hưởng gì đến SEO hết, đây thưc sự là một điều rất đáng quý mà Cufón đã làm được. Lý do là bởi vì Cufón dùng js để thay thế text trong khi các máy tìm kiếm chỉ đọc html mà không render js như trình duyệt.

Tóm lại là nếu các bạn muốn tạo phong cách riêng, không đụng hàng cho blog thì Cufón chính là một trong những sự lựa chọn tốt cho bạn và đừng quên donate cho tác giả vì đã tạo ra ứng dụng tuyệt vời này nhé