Khai báo @Font-face
Khai báo @font-face phía đầu file css, chỉ định đường dẫn đến nơi lưu trữ font.
@font-face {
font-family: myFont;
src: url(font_vietvang.woff2);
}
myFont : tên font khai báo
font_vietvang.woff2 : file của font cần khai báo với định dạng woff2
Trình duyệt hỗ trợ
Có nhiều định dạng font chữ để bạn có thể lựa chọn sử dụng.
Nhưng có những định dạng hỗ trợ trình duyệt này lại không hỗ trợ trình duyệt kia.
Có loại hỗ trợ trình duyệt mới chứ không hỗ trợ trình duyệt cũ.
=> Nên muốn sử dụng hiệu quả, bạn nên nắm rõ nó.
Cách sử dụng tối ưu
Không phải vì thế mà bạn lại lựa chọn font có định dạng TTF, OTF hoặc WOFF vì nó hỗ trợ hầu hết các trình duyệt chăng ? .Tôi sẽ giải thích rõ hơn từng font chữ để các bạn hiểu rõ hơn.
Khi sử dụng font-face cho web bạn nên sử dụng nhiều định dạng khác nhau trên 1 font-face.
Tại sao vậy :
Thứ tự thường dùng khai báo : woff2 -> woff -> ttf/otf -> svg -> eot. Khi các bạn khai báo nhiều đường dẫn load font. Thì trình duyệt sẽ tìm theo thứ tự từ trái qua phải, nếu định dạng nào hỗ trợ nó sẽ dựng lại ở định dạng đó và không load các định dạng khác.
- Vì sao sử dụng woff2 đầu tiên
- Vì font này là loại font nhẹ nhất. Nó giảm tải dung lượng khi load trang.
- Nhưng nhược điểm của nó là không hỗ trợ các trình duyệt có phiên bản thấp.
- woff :
- Tương tự nó lại có dung lượng nặng hơn woff2.
- Nhưng nó lại sử dụng nhiều trình duyệt có phiên bản thấp hơn. Vì thế nó có độ ưu tiên thứ 2.
- ttf/otf
- Font có định dạng này thì hỗ trợ rất nhiều trình duyệt có phiên bản thấp. Nhất là safari có thể hỗ trợ từ 3.1 trở lên.
- Nhưng nhược điểm của nó rất rất nặng nhé các bạn.
- svg, eot :
- Các bạn nhìn lên bảng trình duyệt hỗ trợ trên là biết rồi đấy. Nó hỗ trợ rất ít trình duyệt.
- Nhưng ưu điểm nó lại là hỗ trợ các trình duyệt cực thấp . vd: eot có thể hỗ trợ từ IE 6 đấy. Cá nhân tôi rất ít sử dụng 2 loại font này. Vì thời đại bây giờ chả ai dùng những phiên bản cực thấp như thế này nữa, tuy nó hỗ trợ ít trình duyệt như thế mà lại có dung lượng lưu trữ lớn => đó cũng là lý do mình không sử dụng
=> Tùy vào mục định có thể chọn những định dạng font nào cho hợp lý