Hướng dẫn Tìm hiểu và áp dụng Cúfon

[PVS]

Tìm hiểu và áp dụng Cúfon

Có tổng cộng 3 cách để áp dụng một font “ngoại” vào website của mình. Cúfon là một phương pháp rất hay. 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ách áp dụng Cúfon 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é.

<script type="text/javascript" src="cufon-yui.js"></script>
<script type="text/javascript" src="your-font-name.js"></script>

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ụ, mình đó một đoạn code html như sau:

<h1>Fonts for Web: Cúfon</h1>
<p>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.</p>

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

<script type="text/javascript">
Cufon.replace('h1');
</script>

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ự:

<script type="text/javascript">
Cufon.replace('#id');
Cufon.replace('#id h1');
Cufon.replace('#id ul li:first-child');
Cufon.replace('.class');
Cufon.replace('.class1, .class2');
</script>

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à mình debug trên trình duyệt Chrome. Chúng ta có thể dễ dàng nhận thấy rằng, Cúfon đã 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 Cúfon 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 Cúfon 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ự như sau:

<script src="cufon-yui.js" type="text/javascript"></script>
<script src="Vegur_300.font.js" type="text/javascript"></script>
<script src="Myriad_Pro_400.font.js" type="text/javascript"></script>
<script type="text/javascript">
Cufon.replace('h1', { fontFamily: 'Vegur' });
Cufon.replace('h2', { fontFamily: 'Myriad Pro' });
</script>

Kết luận
Cúfon 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ó.

Chúc các bạn thành công.

Nguồn: izwebz.com​