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.

[tweet]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 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>

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
Demo của Hutek chính là blog này.
[stextbox id="info"]Phần trên là nội dung là Hutek tổng hợp lại từ hai bài viết của hai tác giả vannyneo và huyvq, đây là link chi tiết
Cufon – giải pháp thay thế sFIR
Thay thế font sử dụng Cufón
[/stextbox]

Còn đây là một số ý kiến của 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à Hutek 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

  Hutek's Cufón (33.3 KiB, 317 hits)
You need to be a registered user to download this file.

<script type="text/javascript" src="http://yourdomain.com/link-to/js/cufon-yui.js.php"></script>
<script type="text/javascript" src="http://yourdomain.com/link-to/js/UTM_Flavour_400.font.js.php"></script>
<script type="text/javascript">
  Cufon.replace('.main h3');
</script>

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é (Hutek cũng đã ủng hộ 2 usd qua paypal)