2 cách nhúng font vào web

11/10/2021 14:38

Có rất nhiều trang web mà chúng ta thấy ngày nay nhưng chỉ dùng khoảng 9 font phổ biến – còn gọi là font web an toàn (web safe font).

Bao gồm:
1. Arial;
2. Time New Roman;
3. Georgia;
4. Tahoma;
5. Verdana;
6. Trebuchet MS;
7. Courier New;
8. Comic Sans MS;
9. IMPACT;

Trong thiết kế web, nhiều khi chúng ta muốn sử dụng một vài font độ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 (hoặc thiết bị khác) 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 (hoặc bên thứ ba). 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.

Cách thứ nhất: Nhúng font trực tiếp vào web bằng code. Đoạn code sau đây được đưa vào file CSS

@font-face {
font-family:abc; // tên font mà bạn muốn đặt
src:url('../fonts/acb.ttf') format('truetype'),
url('../fonts/acb.eot#iefix') format('embedded-opentype'),
url('../fonts/acb.woff') format('woff');
font-weight:normal;
font-style:normal;
}

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, image, fonts... Thư mục fonts để chứa các fonts của chúng ta.

Sau khi chúng ta insert code trên vào file css. Bạn 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í dụ, bạn đặt các tiêu đề .title là font nhúng ở trên thì bạn viết như sau trong css:

.title {font-family:abc;}

Cách thứ hai: Nhúng font trực tuyến
Nhúng font bằng Google Font có ưu điểm nhanh, miễn phí, và đợn giản.
Bạn truy cập vào trang web https://fonts.google.com/ để chọn font mà bạn thích. Sau đó bạn nhấn vào hình mũi tên trỏ (Quick-use)
Chọn Google font

Google cho bạn đoạn code để đưa vào web, khu vực trong thẻ head của trang HTML (nó gần giống với liên kết CSS), code đó có dạng như sau:

Bạn có thể thấy tên font trong ví dụ này là Ruge Boogie, tiếp theo, muốn sử dụng font này, thì trong CSS, bạn viết như sau:

body {font-family: ‘Ruge Boogie’, cursive;font-size:20px;}

Như vậy là đã xong. Thông tin thêm là Google Font có khoảng hơn 600 font, nhưng font tiếng Việt thì không nhiều.