Sử dụng font tùy ý trên website

Bạn nào làm trong mảng thiết kế website chắc cũng hiểu rõ một trong những khó khăn khi thiết kế website là vấn đề font chữ. Nhiều bản thiết kế rất đẹp nhưng cũng đành … vứt xó vì font chữ không thể hiển thị trên website vì trên máy người dùng (client) không có font đó. Trong bài viết này mình sẽ hướng dẫn các bạn khắc phục chuyện này để có những bản thiết kế đẹp nhất.

Chắc lúc này bạn có nghĩ đến một hình thức khác là sử dụng hình ảnh để cố định text không bị thay đổi đúng không ?

Nhưng nếu bạn không phải là người giỏi photoshop một chút hoặc người viết bài không phải là người biết về photoshop thì việc đó sẽ là vô cùng khó khăn cho họ. Thật may mắn là chúng ta có một ứng dụng trực tuyến có thể giúp chúng ta hoàn thành viên này một cách đơn giản và dễ dàng mà không cần phải hiểu rõ gì về photoshop. Thậm chí nó còn không gây khó khăn cho các bộ máy tình kiếm khi crawl trên website bạn.

Hãy view source ví dụ của tôi bạn sẽ thấy điều khác biệt ;;)

Ứng dụng mà tôi muốn giới thiệu đến cho bạn là cufón. Nguyên lý hoạt động khá đơn giản: cufón sẽ biên dịch font chữ của bạn chọn thành mã Javascript để thay thế trên các vị trí text mà bạn chọn.

Đầu tiên để cài đặt bạn download trình biên dịch cufón về tại đây (Save link as).

Tiếp theo bạn truy cập ứng dụng Generate của cufón và tiến hành việc biên dịch font của bạn thành mã javascript. Trong ví dụ trên tôi sử dụng font vnibaybuom.tff , bạn có thể thay thế bằng font bạn thích. Sau khi biên dịch, bạn sẽ nhận được file VNI-Baybuom_400.font.js.

Cài đặt

Bạn thêm đoạn code sau vào phần header
[code language=”javascript”]<script src="js/cufon-yui.js" type="text/javascript"></script>
<script src="js/VNI-Baybuom_400.font.js" type="text/javascript"></script>[/code] Nhớ thay file VNI-Baybuom_400.font.js bằng file bạn đã generate ra nhé.

Thay thế các thành phần trên website

Những vị trí nào bạn cần thay thế font chữ bằng font mới tại bạn có thể định nghĩa nó bằng đoạn code sau:
[code language=”javascript”] <script type="text/javascript">
Cufon.replace(‘#mytext h2, #mytext h3’);
</script>
[/code] Bạn nên nhớ rằng việc thay thế càng nhiều text trên website càng khiến cho website hoạt động chậm hơn trên máy client (vì càng hao tốn resource của client). Do đó bạn chỉ nên thay thế các thành phần chủ đạo như tiêu đề, slogan của website… mà thôi.

Bạn có thể view source demo của tôi để tìm hiểu thêm.

Chúc thành công.