You are hereBlogs / huyvq's blog / Cufon - giải pháp thay thế sFIR
Cufon - giải pháp thay thế sFIR
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.
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.
Sử dụng Cufon cũng rất đơn giản. Đầu tiên vào trang chủ của Cufon lấy về file cufon-yui.js. Tiếp theo chúng ta phải tạo ra một file js tương ứng với font mà mình muốn hiện thị. Công việc này được tự đông bằng trang web sinh tự động.
Sau khi có 2 file js trên chúng ta có thể thử sử dụng bằng đoạn code dưới đây. Cách sự dụng cụ thể có thể tham khảo bằng link này.
<!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 type="text/javascript">
Cufon.replace('h1');
</script>
</head>
<body>
<h1>This text will be shown in Vegur.</h1>
</body>
</html>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.
àáạảãâầấậẩẫăằắặẳẵèéẹẻẽêềếệểễìíịỉĩòóọỏõôồốộổỗơờớợởỡùúụủũưừứựửữỳýỵỷỹđÀÁẠẢÃÂẦẤẬ ẨẪĂẰẮẶẲẴÈÉẸẺẼÊỀẾỆỂỄÌÍỊỈĨÒÓỌỎÕÔỒỐỘỔỖƠỜỚỢỞỠÙÚỤỦŨƯỪỨỰỬỮỲÝỴỶỸĐ
Ví dụ vào link sau để xem!
- huyvq's blog
- 1007 reads
Bạn ơi, font Vegur của bạn không phải Font Unicode, nên không có bảng mã tiếng Việt trong đó. ^_^
dùng file js của bạn thì được, còn upload cái font này: http://www.fontspace.com/arro/vegur nên thì không được. Đúng là vấn đề chọn font không đơn giản, hoặc là lúc chọn các option mình sai gì chăng??? (mình đã chọn hết:
àáạảãâầấậẩẫăằắặẳẵèéẹẻẽêềếệểễìíịỉĩòóọỏõôồốộổỗơờớợởỡùúụủũưừứựửữỳýỵỷỹđÀÁẠẢÃÂẦẤẬ
ẨẪĂẰẮẶẲẴÈÉẸẺẼÊỀẾỆỂỄÌÍỊỈĨÒÓỌỎÕÔỒỐỘỔỖƠỜỚỢỞỠÙÚỤỦŨƯỪỨỰỬỮỲÝỴỶỸĐ
theo gợi ý của bạn)
Bạn có thể hướng dẫn lại phần upload font (lấy cái Vegur làm ví dụ) được ko?
Quả Cufon này nan giải nhỉ :(, mình thử mấy font tiếng Việt đều ko được, không biết có phải là font thì được, font thì ko? hay tại gì. Để thử: Vegur xem sao
Post new comment