<tip id='1897' />

Sử dụng @font-face để tạo font chữ theo ý muốn

Với CSS3, bạn sử dụng @font-face để chỉ định cho browser biết font chữ đó lưu trữ online và download xuống để hiển thị.
Khai báo:

@font-face {
    font-family: 'Tên_Font';
    src: url('đường_dẫn_đến_font.eot') format('embedded-opentype'),
         url('đường_dẫn_đến_font.woff') format('woff'),
         url('đường_dẫn_đến_font.ttf') format('truetype'),
         url('đường_dẫn_đến_font.svg#ten_font') format('svg');
}

Việc sử dụng nhiều loại định dạng font ở bên trên để đảm bảo chạy được trên các trình duyệt khác nhau.

Các sử dụng:
Sau khi khai báo như trên thì bạn sử dụng ‘Tên_Font’ như một font hệ thống bình thường khác:

.title {
    font-family: Ten_Font;
}

Bạn có thể sử dụng web-tool sau để convert về 4 định dạng font trên khi mà chỉ có 1 trong 4 font đó: http://convertfonts.com

Chúc bạn thành công và không còn bận tâm với sự bó buộc của lưa chọn font khi thiết kế website nữa.

Khi trích dẫn bài viết từ tek.eten.vn, xin vui lòng ghi rõ nguồn. Chúng tôi sẽ rất cảm ơn bạn!