Giới thiệu:
Hiển thị font tùy thuộc vào trình duyệt. Hiện chia làm loại chính
Trình duyệt có hỗ trợ sử dụng file TTF: firefox, safari, chrome
Trình duyệt sử dụng file EOT: internet explorer (IE).
Vì vậy cùng 1 lúc phải sử dụng 2 file.
Ngoài ra còn có công cụ CU-FONT convert file font qua js - điểm mạnh hiển thị được tất cả trình duyệt. Điểm yếu của cu-font thêm các tag, copy text không được và khó kiểm soát khi cần nâng cấp. Vì vậy nên sử dụng @font-face.
Chuyển đổi file TTF qua EOT: http://www.kirsle.net/wizards/ttf2eot.cgi
Sử dụng trong CSS
Style trong file CSS
@font-face
{
font-family: myFirstFont;
src: url('Sansation_Light.ttf'),
url('Sansation_Light.eot'); /* IE */
}
Vấn đề thường gặp phải: đ
IE sử dụng chuẩn font khác .EOT để hiển thị. Có nhiều lỗi liên quan đến hiển thị font của IE8.
Các phương pháp thực hiện thử:
1. Đường dẫn chính xác: trường hợp này để thử cách chính xác đường dẫn đúng
@font-face
{
font-family: myFirstFont;
src: url('http://mydomain.com/font/myfont.ttf'),
url('http://mydomain.com/font/myfont.eot'); /* IE */
}
2. Tách khai báo font face CSS ra thêm 1 file dành cho ie.css
vào file index.php thêm vào cuối cùng của thẻ <head>
<!--[if IE]>
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/css/ie.css" type="text/css" />
<![endif]-->
Trong file ie.css khai báo duy nhất 1 đoạn : file .eot nằm cùng folder với file ie.css
@font-face
{
font-family: myFirstFont;
src:
url('myfont.eot'); /* IE */
}
Nguyên nhân : khi khai báo chung có 1 số trường hợp browser không nhận được. Nguyên nhân thì mình không rõ. Nhưng khi tách ra thì IE lại nhận được.
Thứ Năm, 10 tháng 10, 2013
Đăng ký:
Đăng Nhận xét (Atom)
0 nhận xét:
Đăng nhận xét