CSS3 05 – CSS3 WebFonts

0
86

Webfonts trong CSS3 cho phép chúng ta có thể sử dụng các font mà không cài đặt trên máy tính của người dùng. Khi bạn đã có được fonts bạn muốn , bạn chỉ cần nhúng file này trên WebSever, sau đó nó sẽ tự động tải tới người dùng khi cần thiết. Các font này sẽ được định nghĩa trong quy tắc @font-face.

1. Trình duyệt hỗ trợ

Quy tắc @font-face được tất cả các trình duyệt hiện hành hỗ trợ. Tuy nhiên để các trình duyệt có thể hỗ trợ tốt thì tôi khuyên các bạn chỉ nên sự dụng font có định dang .ttf , .otf và .woff

2. Cách sử dụng @font-face

Để sự dụng font face chúng ta phải thiết lập tên cho font và đường dẫn của font trong quy tắc @font-face

Cú pháp

Trong đó:

font-family: Khai báo tên font sau này sử dụng

src: Đường dẫn tới file của font

để sử dụng được font chúng ta vừa gọi vào chúng ta sủ dụng thuộc tính khai báo font như bình thường.

Ví dụ tôi có 1 file font tên là Lato.ttf

Bây giờ tôi muốn nhúng file này vào web thì làm như sau.

Trước tiên tôi sẽ tiến hành khai báo tên font và đường dẫn tới file font của tôi.

Tên fonts các bạn có thể đặt tên bất kỳ miễn sao sau này các bạn nhớ tên và khai báo nó vào là được.

ở đây tôi đặt tên là Lato_vietpro.

Để sự dụng được font này tôi sẽ tiến hành khai báo font vào trang web của tôi bằng thuộc tính font-family

Ở trong @font-face thì thuộc tính font-family có chức năng là khai báo tên font, còn trong website hay các thẻ thì font-family có tác dụng là gọi font nha.

Ví dụ tôi sẽ sự dụng font này cho một khối div của tôi , tôi sẽ gọi như sau

Trong bài tiếp theo tôi sẽ giới thiệu cho các bạn về các hiệu ứng 2D và 3D Transform.

Chúc các bạn học thật tốt!

Tác giả: Cao Anh Nhất

[Total: 0    Average: 0/5]

LEAVE A REPLY

Please enter your comment!
Please enter your name here