Các font an toàn dành cho website thường gặp đó là Arial, Verdana, Helvetica, Tahoma, Trebuchet MS, Times New Roman, Georgia… Tại sao chúng được gọi là an toàn? Bởi vì khi trình duyệt hiển thị sẽ hầu như không gây ra lỗi.

Tuy nhiên những Font đó thường không đẹp cho lắm. Và bạn đang muốn thay thế một loại font khác bắt mắt hơn. Trong CSS3 hỗ trợ @font-face cho phép bạn gọi Font chữ độc lạ bất kỳ. Chính điều này sẽ giúp cho những người thiết kế website phía Front end không còn phải lo lắng về vấn đề Font nữa.

Các kiểu font được hầu hết trình duyệt như Chrome, FireFox, IE … hỗ trợ

  • .ttf (true type font)
  • .otf (OpenType)
  • woff (Web Open Font Format)

Cách dùng @font-face trong CSS

Đầu tiên bạn phải Download font chữ yêu thích tại Google Font.

>> Xem qua bài này 2 Cách chỉnh font chữ trong WordPress.

Sau khi tải về bạn cần đặt ở một thư mục nào đó, chẳng hạn mình sẽ đặt là font. Giải nén ra sẽ thấy danh sách các kiểu font.

font-face-css

Cách gọi:

@font-face {
  font-family: Open Sans;
  src: url(https://quachquynh.com/wp-content/themes/quachquynh/fonts/OpenSans/OpenSans-Regular.ttf); 
}

body {
  font-family: "Open Sans", Arial, sans-serif;
}

Giải thích:

  • Trước tiên phải gọi tên Font
  • src: là đường dẫn tới thư mục chứa Font chữ đó. Cần phải gọi chính xác.
  • font-family: “Open Sans”, Arial, sans-serif; sẽ gọi font ra. Bên cạnh đó cũng thêm 2 font dự phòng là Arial và sans-serif. Trong trường hợp trình duyệt không hỗ trợ nó sẽ hiển font dự phòng.
Lưu ý: Cần phải đặt trong 2 dấu ngoặc kép "Roboto."

Với cách gọi này thì bạn không nên lạm dụng quá nhiều. Chỉ nên giới hạn một vài Font mà thôi. Bởi nó sẽ ảnh hưởng tới thời gian phản hồi máy chủ khiến cho tốc độ website bị chậm lại.

Qua bài hướng dẫn sử dụng font-face trong CSS trên đây nếu có bất kỳ thắc mắc gì vui lòng Comment bên dưới để được hỗ trợ.

Category:

Bình luận!

Xin lưu ý rằng tất cả các bình luận đều được kiểm duyệt theo chính sách bảo mật và tất cả các liên kết đều là nofollow. KHÔNG sử dụng từ khóa trong trường tên. Hãy để lại một cuộc trò chuyện cá nhân và ý nghĩa. *