Có tổng cộng 3 cách để áp dụng một font “ngoại” vào website của mình. Cufont là một phương pháp rất hay. Tiếp tục series “Fonts for web”, hôm nay thì chúng ta sẽ tìm hiểu rõ hơn về phương thức hoạt động cũng như các áp dụng Cufon vào website của mình.

Áp dụng cúfon vào website

Bạn tiến hành download đoạn script mà trình duyệt trả về cho bạn sau khi đã convert xong. Bây giờ chúng ta sẽ tiến hành áp dụng nó vào website. Nhưng trước tiên, chúng ta cũng cần phải có bộ giải mã của cúfon nữa chứ, bạn có thể download nó ngay tại trang chủ. Sau khi download cả 2 tập tin javascript đó về rồi thì chúng ta tiến hành chèn vào website. Hai đoạn script cần chèn phải nằm trong thẻ head nhé.

Tuy nhiên, lúc này thì nó vẫn chưa hoạt động được đâu. Chúng ta phải tiến hành khai báo thêm bằng javascript đối tượng nào sẽ được chỉ định để dùng font “ngoại”.
Ví dụ, tôi đó một đoạn code html như sau:

Fonts for Web: Cúfon

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt, 
doloribus veritatis maxime omnis culpa quisquam provident nostrum 
natus! Incidunt corporis dolor rerum at ducimus recusandae 
mollitia illum sequi ipsum sint.

Bây giờ tôi muốn dùng font “ngoại” cho thẻ h1 thì chúng ta chỉ cần khai báo như sau:

Hoặc bạn muốn dùng nó cho .class hoặc #id, hoặc các kiểu selector khác thì chúng ta cũng khai báo tương tự:

Bạn cũng cần phải lưu ý: đối với các trình duyệt cũ như IE6,7 thì cần phải dùng khai báo class hoặc id thì mới có tác dụng. Việc sử dụng nó hoàn toàn đơn giản và không quá phức tạp đến mức phải bức tóc để suy nghĩ.

Các bạn nhìn vào hình ảnh mà tôi debug trên trình duyệt Chrome. Chúng ta có thể dễ dàng nhận thấy rằng, cufont đã replace các từ trong đoạn ký tự của h1 thành các thẻ cavas để hiển thị.

Styling cho đối tượng dùng cúfon

Việc tô thêm màu mè hoa là hẹ cho một đối tượng dùng cufon thì cũng không có gì khó, chúng ta hoàn toàn có thể style cho đối tượng đó bằng css thông thường. Tuy nhiên, trong các trường hợp đặc biệt như hover hoặc tô màu dạng gradient thì chúng ta phải dùng các phương thức do cufon cung cấp để áp dụng. Và cách sử dụng nó cũng hoàn toàn đơn giản, các bạn có thể xem qua wiki của nó tại địa chỉ website này: https://github.com/sorccu/cufon/wiki/Styling

Dùng nhiều font có được không?

Vấn đề đó thì tất nhiên là được rồi. Bạn có thể dùng font này cho tiêu đề, font khác cho các đoạn paragraph,… Việc đó cũng không làm khó cúfon được đâu. Chúng ta chỉ cần tiến hành khai báo thêm font-family trong khai báo javascript Cufon.replace thôi. Các bạn có thể khai báo tương tự theo các sau:

Kết luận

Cufon thực sự rất hay, tuy nhiên bạn hãy trải nghiệm nó đi, rồi bạn sẽ dần dần phát hiện ra các điểm yếu của nó. Trong các bài tiếp theo, tôi sẽ phân tích cho các bạn thấy mặt mạnh, yếu của từng cách dùng font “ngoại” vào web.