Sử dụng font chữ riêng cho blog với @font-face CSS3

Bây giờ, với CSS3, các bạn có thể dùng bất kì font chữ nào mà bạn yêu thích cho blog của mình, không còn bó buộc trong những font chữ “web-safe” nữa.

Công cụ sử dụng: Quy tắc @font-face của CSS3.

Chú ý
Internet Explorer chỉ hỗ trợ loại font *.eot.
Firefox, Chrome, Safari và Opera hỗ trợ loại font *.ttf và *.otf.

Định nghĩa và Cách dùng

Với quy tắc @font-face, người thiết kế web không còn bị bắt buộc dùng một trong những font chữ “web-safe”

Để tạo một quy tắc font-face, ta cho nó một cái tên:

  • font-family: myFirstFont;

Lưu font lên server của bạn và khai báo “hộ khẩu” cho nó:

  • src: url('/fonts/UVNMauTim1.ttf');

Nếu font nằm ở một nơi có tên miền khác thì bạn dùng đường dẫn tuyệt đối:

  • src: url('http://cosmospham.com/fonts/UVNMauTim1.ttf')

Bây giờ thì font này đã có thể sẵn sàng sử dụng. Sau đây là một ví dụ cách dùng font này cho thẻ div:

div { font-family: myFirstFont; }

Cú pháp

@font-face { font-properties }

Thuộc tính Giá trị Mô tả
font-family name Bắt buộc. Khai báo tên font.
src URL Bắt buộc. Khai báo URL dẫn tới nơi tải font về.
font-stretch normal
condensed
ultra-condensed
extra-condensed
semi-condensed
expanded
semi-expanded
extra-expanded
ultra-expanded
Tùy chọn. Xác định font dãn (chiều ngang) nhiều hay ít. Mặc định là “normal”.
font-style normal
italic
oblique
Tùy chọn. Xác định kiểu font. Mặc định là “normal”.
font-weight normal
bold
100
200
300
400
500
600
700
800
900
Tùy chọn. Xác định mức đậm nhạt của font. Mặc định là “normal” = 400.
unicode-range unicode-range Tùy chọn. Xác định dãy kí tự Unicode mà font hỗ trợ. Mặc định là “U+0-10FFFF”

Nguồn: W3Schools.com


Tại FontChu.com có khá nhiều font chữ đẹp cho bạn chọn, download miễn phí.

Tuy nhiên, các font này hầu hết là font ttf. Để chuyển sang dạng font eot, bạn có thể dùng công cụ chuyển đổi trực tuyến miễn phí tại kirsle.net.

Hiện tại mình đã dùng công cụ chuyển font và quy tắc @font-face để đổi font cho title của blog và các entry.

Lưu ý cuối cùng
Lạm dụng quá nhiều font chữ sẽ làm tăng thời gian tải trang web của bạn, vì trình duyệt sẽ tải tất cả những font không thuộc diện web-safe về máy người dùng.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s