ITZ Việt Nam

Cách nhúng font vào web với @font-face

Thực ra thế giới web không dùng nhiều font, bạn sẽ bất ngờ khi biết có khoảng 100 ngàn các loại font chữ khác nhau, nhưng hàng tỷ trang web mà chúng ta thấy ngày nay vẫn chỉ dùng khoảng 10 font phổ biến – còn gọi là font web an toàn (web safe font).

 

Danh sách các font web an toàn

Bao gồm:

Trong thiết kế web, nhiều khi người thiết kế muốn sử dụng một vài phông độc đáo nhằm gây hiệu ứng về mặt thẩm mỹ đối với người xem. Nhưng trước kia khi việc nhúng font là không thực hiện được, người thiết kế đành ngậm ngùi chịu gò bò chỉ sử dụng các font chữ mà trên máy tính người truy cập web có, và điều đấy làm nảy sinh ra thuật ngữ font web an toàn – chính là các font hay được cài nhất trên máy tính toàn cầu.

Giờ đây mọi chuyện được giải quyết thật đơn giản, người thiết kế chỉ cần đưa font độc đáo của mình lên host của trang web. Khi người dùng duyệt web, họ sẽ tải font về (giống như tải ảnh vậy) và xem được các hiệu ứng font lạ mắt trên trang web.

Nhúng font bằng @font-face trong CSS đã mở bung sức sáng tạo của nhà thiết kế, kết hợp với các khả năng của CSS3, typography trên web đã lên một tầm cao mới.

Code mẫu nhúng font

Đoạn code sau đây được đưa vào file CSS, đừng lo nếu bạn không hiểu luôn, ngay phía dưới có phần giải thích chi tiết:

@font-face {
font-family:font_strong;
src:url(‘../fonts/Captureit.ttf’) format(‘truetype’),
url(‘../fonts/Captureit.eot#iefix’) format(’embedded-opentype’),
url(‘../fonts/Captureit.woff’) format(‘woff’);
font-weight:normal;
 font-style:normal;
}

Với code trên thì cấu trúc thư mục trang web của bạn phải giống như hình sau:

Đây là cấu trúc mà đa số mọi người thường dùng, trong đó các file html ở bên ngoài, và từng phần chuyên biệt có thư mục riêng như css để chứa các file CSS, fonts để chứa các Fonts lạ mắt của chúng ta…

Giải thích code

Vậy là xong, giờ ta dùng font cũng y như bình thường, nghĩa là chỗ nào cần dùng font nhúng ta khai báo font-family là tên font mà ta đã đặt vừa nãy là được, giả dụ giờ mình đặt các tiêu đề .title là font nhúng ở trên thì mình viết như sau trong CSS:

.title {
       font-family:font_strong;
}

Trình duyệt hỗ trợ

Tất cả các trình duyệt phổ thông gồm Chrome, FireFox, Opera, Safari và IE đều hỗ trợ nhúng font, tuy nhiên loại font mà chúng support thì có khác nhau.

  • Internet Explorer 9+, Firefox, Chrome, Safari và Opera hỗ trợ WOFF (Web Open Font Format) font.
  • Firefox, Chrome, Safari và Opera cũng hỗ trợ TTF (True Type Fonts) và OTF (OpenType Fonts).
  • Chrome, Safari và Opera hỗ trợ SVG fonts/shapes.
  • Internet Explorer hỗ trợ EOT (Embedded OpenType) fonts.

Nhúng font trực tuyến

Cái này vừa có điểm giống với @font-face mà cũng vừa khác nữa:
  • Giống ở chỗ, font sử dụng đều tải từ nơi khác về, và được dự trù là không có trên máy người dùng
  • Khác ở chỗ, @font-face là tải từ host của bạn, trong khi nhúng font trực tuyến thì tải từ server dịch vụ riêng
Hôm nay tôi sẽ giới thiệu với các bạn cách nhúng font bằng Google Font, ưu điểm:
  • Nhanh, đảm bảo: Vâng, vì nó là host của Google, nên tốc độ ổn định, hầu như không bị hỏng hóc, nên bạn có thể an tâm gần như 100%
  • Miễn phí: Bạn không phải mất tiền để sử dụng dịch vụ này. Thêm vào đó bạn cũng giúp giảm băng thông cho host của bạn
  • Đơn giản: Code nhúng của nó thậm chí còn đơn giản hơn @font-face. Kết quả demo bạn có thể xem ngay ở dưới.
Cách làm:
  • Truy cập trang web http://www.google.com/fonts để chọn font mà bạn thích. Sau đó nhấn vào hình mũi tên trỏ (Quick-use)
 

 

Một số lưu ý:
  • Google Font có đến 3 kiểu nhúng: tiêu chuẩn là kiểu link ở trên, thứ hai là @import và cuối cùng là dùng JavaScript – cả 3 đều cho kết quả tương đương nhau, nhưng kiểu đầu tiên được khuyên dùng
  • Nếu muốn đồng bộ hóa font trên Google Font với Desktop hãy sử dụng tiện ích SkyFonts
  • Lời cuối: hãy thận trọng với nhúng font, đừng nhúng quá nhiều font khác nhau, vì nhúng font nghĩa là người dùng phải tải font về, nhúng các font quá nặng chắc chắn làm tăng thời gian tải trang, cái này là áp dụng chung chứ không riêng gì cho Google Font

Trả lời câu hỏi phụ (Mà cũng có khi là chính)

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

Bài viết liên quan