Trong bài trước, chúng ta đã làm quen với lịch sử phát triển của font chữ. Trong bài viết hôm nay, chúng ta sẽ đi vào áp dụng thực tế bằng cách áp dụng phương thức css 3 font-face. Trước đây, tôi từng có một video về font-face. Tuy nhiên, cấu trúc của font-face lúc đó còn khá đơn giản. Hiện tại, cách dùng của font-face đã trở nên phức tạp hơn rồi.

Trước tiên, chúng ta sẽ xem qua video này để có thể biết được lịch sử hình thành của font-face và các chuyển đổi một font chữ tiếng Việt.

Lỗi font tiếng Việt

Tôi chắc chắn một điều rằng, rất nhiều bạn sẽ không thể nào dùng được hết toàn bộ các ký tự tiếng Việt. Trong video tôi có hướng dẫn các các bạn dùng Font Squirrel để convert và sử dụng được tiếng Việt. Tuy nhiên, hôm nay khi tôi test lại thì phát hiện trong bộ ký tự mà Font Squirrel convert lại thiếu mất một ký tự “ú”, nếu bạn gõ từ “chúng” thì nó sẽ chỉ hiển thị “ch ng” thôi.
Vậy chả nhẽ bó tay sao? Thực ra có rất nhiều website cho chúng ta convert font. Chúng ta hoàn toàn có thể lựa chọn các phương pháp thay thế khác nhau. Bây giờ chúng ta có thể dùng website font2web.com để convert font. Cách convert thì cũng đơn giản thôi, chúng ta chỉ cần upload và download, website này không yêu cầu các setting rờm rà và rắc rối.

Cấu trúc @font-face

Trước tiên, các bạn cần phải giải nén tập tin nén được trả về sau khi đã convert xong. Trong đó sẽ gồm các tập tin font .woff, .eot, .ttf,… và một tập tin font.css bạn tiến hành mở nó lên vào xem các đoạn code có bên trong. Đó chính là cấu trúc chuẩn của font-face trong phiên bản css 3.

@font-face {
	font-family: 'UTM_Neo';
	src: url('fonts/UTM Neo Sans Intel.eot');
	src: local('UTM Neo Sans Intel'), 
	url('fonts/UTM Neo Sans Intel.woff') format('woff'), 
	url('fonts/UTM Neo Sans Intel.ttf') format('truetype'), 
	url('fonts/UTM Neo Sans Intel.svg') format('svg');
	font-weight: normal;
	font-style: normal;
}

Trong đó thuộc tính font-family được khai báo ở @font-face đó là tên font mà chúng ta khai báo để sử dụng sau này. src local chính là khai báo nếu như trên máy của khách hàng có font đó thì nó sẽ dùng luôn, khỏi phải tải về từ server. Các khai báo url chính là đường dẫn đến các tập tin font của bạn.
Lưu ý: khai báo @font-face phải ở trên cùng của tập tin css. Nếu bạn khai báo ở dưới thì nó sẽ không hoạt động hoạt hoạt động không chính xác.
Sau khi khai báo @font-face xong thì chúng ta có thể áp dụng nó vào bất kỳ đâu mà chúng ta muốn thông qua khai báo font-family cho đối tượng được tham chiếu. Các bạn có thể xem qua các ví dụ dưới đây:

h1{
	font-family: UTM_Neo;
	font-size: 20px;
	font-weight: bold;
}
.font{
	font-family: UTM_Neo;	
	font-size: 15px;
	font-weight: normal;
}

Kết quả hiển thị bạn có thể xem trong link demo tôi đã ghi ở phí trên.

Có nên dùng @font-face?

Font-face rất tiện lợi, nó giúp cho chúng ta rất nhiều, nhưng liệu dùng font-face có thực sự hiệu quả và font-face so với các phương pháp khác như cúfon và webfont thì cái nào sẽ là nhất. Tôi sẽ tiến hành phân tích trong các bài viết tiếp theo trong series “Fonts for web”. Các bạn hãy theo dõi nhé.