header-object

Kỹ thuật load font từ site

1. Vấn đề

Hôm nay tôi sẽ hướng dẫn cho bạn một kỹ thuật rất hay đó là kỹ thuật load font từ một folder trong site của bạn. Bài trước đó tôi cũng đã hướng dẫn cho bạn cách load một font từ google. Nếu load font từ google thì bạn sẽ lệ thuộc vào google nhiều vì tài nguyên fonts của google đôi khi không có font như bạn mong muốn. Điều này sẽ gây trở ngại cho bạn và gặp nhiều khó khăn trong xử lý. Tốt nhất là bạn thích font gì thì load font đó

2. Phương thức load fonts

Để load được font thì trước tiên bạn phải tìm được một font mình thích và hãy tìm thêm 3 file nữa đề định dạng cho website. Như vậy, chúng ta sẽ tìm kiếm 4 file có 4 phần đuôi khác nhau lần lượt sẽ là. Tôi lấy ví dụ tôi có một font tên là Nokia thì 4 file của font này như sau

  • utm_nokia_standard-webfont.eot
  • utm_nokia_standard-webfont.svg
  • utm_nokia_standard-webfont.ttf
  • utm_nokia_standard-webfont.woff

Sau khi bạn tìm được 4 loại file trên cho một fonts thì bước tiếp theo chúng ta sẽ lưu chúng vào một folder có tên là “fonts” bạn có thể dùng tên khác.

Bước tiếp theo bạn sẽ tạo một file có tên là fonts.css nằm trong folder tên “css” cùng cấp với site hiển thị tôi tạm lấy tên là “loadfont.aspx” hoặc “loadfont.html” cũng được và tiến hành cài đặt mã lệnh như sau

@font-face 
	{
		font-family: 'utm_nokia_standardregular';
		src:  url('../fonts/utm_nokia_standard-webfont.eot');
		src: url('../fonts/utm_nokia_standard-webfont.eot?#iefix')format('embedded-opentype'),url('../fonts/utm_nokia_standard-webfont.woff')format('woff'),url('../fonts/utm_nokia_standard-webfont.ttf')format('truetype'),url('../fonts/utm_nokia_standard-webfont.svg#utm_nokia_standardregular')format('svg');
		font-weight: normal;
		font-style: normal;
	}
body 
  {
  	font-family: 'utm_nokia_standardregular'; 
  }

@font-face và các đối số trong hàm này là dùng để load 4 files mà bạn vừa tìm của 1 font Nokia. Mã trên đã fix với các trình duyệt bao gồm IE, bạn cứ yên tâm mà dùng.

Sau đó chúng ta dùng tag body để load font này lên đầu tiên cho việc kế thừa của các class trong tag

Kết quả đạt được sẽ là

ky-thuat-load-font-tu-site

GV Hồ Đức Duy

Thêm ý kiến


Security code
Làm mới


2

Facebook

Thống kê truy cập

Hiện có 373 khách đang truy cập
2546499