Hướng dẫn Tìm hiểu và áp dụng Font-face

[PVS]

Tìm hiểu và áp dụng Font-face

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
Mình 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 mình 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 mình 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ặc 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;
}

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. Mình sẽ tiến hành phân tích trong các bài viết tiếp theo.

Chúc các bạn thành công.

Nguồn: izwebz.com​