Cufón - sử dụng font chữ cho Website - Mở đầu với PHP - Thủ thuật tin học, Thủ thuật blog, Tải phần mềm miễn phí

Cufón - sử dụng font chữ cho Website

 

Chắc hẳn khi thiết kế web các bạn cũng ít nhiều quan tâm đến font chữ sẽ hiển thị như thế nào, các bạn muốn hiển thị một số font nào đó theo phong cách riêng, đặc biệt là các dạng font typography. Nhưng muốn làm được điều đó thì chúng ta phải vượt qua một vài khó khăn và khó khăn lớn nhất đó chính là font chữ đó phải được cài sẵn trên máy người dùng, điều này sẽ hạn chế rất nhiều về số lượng font mà chúng ta được phép lựa chọn, thường thì số font này chỉ tập trung vào các font  arial, verdana, tahoma… là những font phổ biến trên các máy của người dùng. Còn nếu muốn hiển thị các loại font đặc biệt thì chúng ta phải đi tìm các giải pháp khác như chuyển văn bản đó thành dạng hình ảnh hay sử dụng Flash. Nhưng nếu không sử dụng khéo lép hình ảnh hay Flash thì sẽ ảnh hưởng rất nhiều đến SEO.

Với Cufón thì vấn đề đó sẽ được giải quyết đơn giản hơn nhiều, chỉ cần trình duyệt của người dùng hỗ trợ javascript vì cufón hoạt động theo cơ chế render font với Canvas hoặc VML bằng javascript. Dó đó khi sử dụng Cufón thì chúng ta có thể tùy biến font trên hầu hết các trình duyệt phổ biến hiện nay.

cufon.jpg

Danh sách các trình duyệt hỗ trợ Cufón:

·         Internet Explorer 6, 7, 8

·         Mozilla Firefox 1.5+

·         Safari 3+

·         Opera 9.5+

·         Google Chrome 1.0+

·         iOS 2.0+

·         Opera Mini (hỗ trợ gần như hoàn thiện)

Chỉ gặp vấn đề trên các trình duyệt sau:

·         Internet Explorer 5.5

·         Safari 2

·         Internet Explorer 9 (sẽ được hỗ trợ với phiên bản 1.1 sắp tới)

Để sử dụng Cufón chúng ta trước tiên phải nhúng thư viện Cufón vào website, sau đó là các file font đã được chuyển thành javascript

Bước 1: Tạo font bằng công cụ generator của Cufón. Tại đây chúng ta upload file nguyên bản của font mà mình muốn sử dụng (ở đây tôi dùng font UTM_Zirkon_400). Hiện tại Cufón generator hỗ trợ các định dạng font sau: TrueType (TTF), OpenType (OTF), Printer Font Binary (PFB) và PostScript. Chúng ta có rất nhiều tùy chọn với công cụ generator này. Sau khi hoàn thành bạn sẽ có link download file font javascript này về.

Bước 2: Nhúng thư viện Cufón và font vừa tạo vào website

<script src="js/cufon-yui.js” type=”text/javascript"></script>

<script src="js/UTM_Zirkon_400.font.js" type="text/javascript"></script>

Bước 3: Sử dụng font vừa tạo để thay thế font mặc định trên trang web

Chúng ta sẽ dùng các api methods mà thư viện Cufón cung cấp cho chúng ta, ở đây tôi chỉ sử dụng một method replace cùng các selector rất thân thiện của Cufón (ngoài ra Cufón có thể hỗ trợ các selector engine phổ biến hiện nay như jQuery, Sizzle, MooTools, Dojo, Prototype…)

Đoạn code áp dụng font mới cho tag h2 và div:

<script type=”text/javascript”>

Cufon.replace(‘h2, div’);

</script>

Bên cạnh đó Cufón còn hỗ trợ sử dụng nhiều font đồng thời như ví dụ sau:

<!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01//EN”

“http://www.w3.org/TR/html4/strict.dtd”>

<html>

<head>

<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″>

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

</head>

<body>

<h1>This text will be shown in Vegur.</h1>

<h2>This text will be shown in Myriad Pro.</h2>

</body>

</html>

Những lưu khi sử dụng Cufón:

  • Cufón chỉ hỗ trợ font Unicode.
  • Khi tạo font chúng ta nên giới hạn tập ký tự mình sẽ sử dụng đến vì thường chúng ta không dùng hết tất cả các ký tự trong một bộ font, việc này nhắm giảm kích thước file font javascript xuống để cải thiện tốc độ tải của trang web cũng như tiết kiệm tài nguyên băng thông.

Chúc các bạn tìm thấy những điều thú vị từ  Cufón!

Bài viết liên quan: