CSS3 @font-face hiển thị font tùy ý trên website

CSS3 font-face - How to use a custom font for your website.
Trước đây các Web designer phải sử dụng các Font chữ trên máy người dùng để hiển thị nội dung trên website. Điều này làm hạn chế rất nhiều đến tính thầm mỹ của website. Dần dần điều đó phần nào được giải quyết khi các trang web hỗ trợ embed font được ra đời như Google.
Và chỉ đến khi CSS3 ra đời, các Web designer mới không còn lo lắng điều đó nữa, họ có thể nhúng bất kì bộ font nào mà họ muốn hiển thị vào website như cách để hiển hị một hình ảnh... Amazing!!
#bl3 Công việc rất dễ dàng, chỉ cần khai báo và sử dụng. Hiện tại (10/2012) tất cả các trình duyệt đều hỗ trợ @font-face, nên chúng ta hãy thoải mái mà vẽ vời nhé.

- Các bạn có thể xem demo: @font-face CSS3

#bl2 Bước đầu tiên
- Chúng ta tạo và upload tất cả các tập tin font lên server. Với một font các bạn phải convert thành 4 định dạng (*.ttf, *.eot, *.woff, *.svg) để đảm bảo tất cả các Browser đều hiển thị được chúng.

• TTF – Works in most browsers except IE and iPhone.
• EOT – IE only.
• WOFF – Compressed, emerging standard.
• SVG – iPhone/iPad.

- Đừng lo lắng về cách tạo ra các định dạng đó. Bạn có thể dùng

• Phần mềm FontXChange.
• http://codeandmore.com #bllink
• http://www.fontsquirrel.com #bllink

#bl2 Khai báo font
- Sử dụng kí tự @ trước từ khóa font-face để khai báo. 'font-family' là tên bạn tự đặt và 'url' là link đến các font file chúng ta vừa upload lúc nảy.

@font-face {
    font-family: 'FontCuaTui';
    src: url('vni-times.eot');
    src: url('vni-times.eot?#iefix') format('embedded-opentype'),
         url('vni-times.woff') format('woff'),
         url('vni-times.ttf') format('truetype'),
         url('vni-times.svg#aachenbold') format('svg');
    font-weight: normal;
    font-style: normal;
}

#bl2 Cách sử dụng
- Cách sử dụng hoàn toàn như bình thường, thật dễ dàng.

h1 {
   font-family: 'FontCuaTui', Arial, sans-serif;
}
#myID {
   font-family: 'FontCuaTui';
}

#bl2 OK, vậy là công việc của chúng ta đã hoàn thành!! Good night!!
#blsrc Reference: http://www.w3schools.com/ #bllink

Cùng wWw.blogit.info chia sẻ Thế giới công nghệ 4 sao

SHARE