Cách sử dụng font Unicode vào thiết kế website

Thông thường, khi thiết kế css, chúng ta chỉ có thể sử dụng các font mặc định của hệ thống như Arial, Tahoma, Verdana… để website hiển thị tốt trên tất cả các máy. Bằng việc tận dụng tối đa CSS, chúng ta sẽ nhúng những font unicode không có sẵn trong hệ thống để các website tiếng Việt không bị đơn điệu về font chữ.

 (tham khảo từ kaiblog)

1. Định dạng trong CSS
Trước tiên, trong file css, bạn phải nhúng font unicode vào trình duyệt bằng đoạn mã

<style type="text/css">
@font-face {
 font-family: Myfont1;
 src: url("amazonen.eot") /* EOT file for IE */
}
@font-face {
 font-family: Myfont1;
 src: url("amazonen.ttf") /* TTF file for CSS3 browsers */
}
</style>

Nếu bạn muốn thêm 1 font khác nữa thì chỉ việc thêm đoạn css này vào trong thẻ style trên

@font-face {
font-family: Myfont2;
src: url("UVNBucThu.eot") /* EOT file for IE */
}
@font-face {
font-family: Myfont2;
src: url("UVNBucThu.ttf") /* TTF file for CSS3 browsers */
}

Trong đó, Myfont là tên font do chúng ta đặt.amazonen.ttf là url dẫn đến nơi chứa font của bạn (tính đường dẫn tương đối từ file css). Do IE chỉ cho phép nhúng định dạng eot trong khi CSS3 (có trong hầu hết FF, CH, SR) lại sử dụng định dạng ttf, nên chúng ta cần phải đặt tên Myfont  ở cả hai định dạng.

Sau đó, với mổi đối tượng cần định dạng với font trên, chỉ cần gọi Myfont như một font đã có trong hệ thống.
Ví dụ như sau:

body {
 font-family: Myfont1, Verdana, Arial, sans-serif;
 font-size: medium;
 color: black
}
span.header {
 font-family: Myfont2, Impact, "Arial Black", sans-serif;
 font-weight: bold;
 color: red
}

Để download được font unicode bạn có thể vào trang fontchu.com để down hoạc tìm kiếm trên mạng.
Như đã đề cập ở trên, IE chỉ chấp nhận cho nhúng định dạng font eot trong khi hầu hết font unicode bạn kiếm được đều ở định dạng ttf.

Công cụ chuyển đổi font từ ttf sang eot:

• http://www.kirsle.net/wizards/ttf2eot.cgi
• http://ttf2eot.sebastiankippe.com/

Chúc vui!