Cách sử dụng @font-face trong thiết kế website

by Unknown 12:39:00 PM 0 nhận xét

@font-face là lệnh css3 đơn giản để embed font mà bạn thích vào website mà không sợ trên máy client không có font đó. Cú pháp embed rất đơn giản bằng css.

Bước 1: lưu trữ font 
upload font chữ mà bạn muốn sử dụng vào folder đặt tên bất kì trên host, ví dụ như "Fonts"

Bước 2: sử dụng css để embed font

@font-face {
font-family:font_name;
src:url('../fonts/zitroneFY.ttf') format('truetype'),
url('../fonts/zitroneFY.eot') format('embedded-opentype'),
url('../fonts/zitroneFY.woff') format('woff');
font-weight:normal;
font-style:normal;
}

Trong đoạn code css bạn cần chú ý ở 2 phần là tên font family mà bạn đặt (font_name)  và đường dẫn font ví dụ "../fonts/zitroneFY.ttf".
- Tên font family bạn đặt tùy ý để sau đó có thể gọi lại sử dụng.
- Đường dẫn font bạn phải đặt đúng với đường dẫn bạn đã lưu file font trên host.
Lưu ý trong ví dụ có tới 3 đường dẫn có nghĩa là font này có tới 3 loại font khác nhau là truetype, embedded-opentype, woff nhằm hỗ trợ các trình duyệt khác nhau (vì có những trình duyệt chỉ hỗ trợ một loại font, ví dụ như embedded-opentype thì chỉ chạy trên Internet Explorer)

Ngoài ra bạn có thể đặt các thuộc tính css khác cho font như bình thường.

Bước 3: Sử dụng

Bạn chỉ cần gọi lại font đó trong css là được, ví dụ:

.header{ font-family:font_name; }

hoặc đặt ngay tại vị trí thẻ html:

<div style="font-family:font_name;">test font</>

Rất đơn giản phải không nào? Chúc các bạn thành công!


Xem thêm:
- Tổng hợp hơn 130 font chữ thư pháp và font chữ viết tay đẹp cho Designer
- Bộ sưu tập hàng trăm logo vector tuyệt đẹp download miễn phí
- Một số mẫu logo vector đẹp download miễn phí
- Cách dùng Google Fonts cho website hoặc blog của bạn