Hướng dẫn import font css - nhập css phông chữ

Hướng dẫn import font css - nhập css phông chữ

Trong bài này chúng ta sẽ tìm hiểu cách sử dụng font trong html và css. Có hai dùng font là tải về, dủng trực tiếp trong mã nguồn. Cách thứ hai là dùng google font.

  • Video – Cách sử dụng font trong html và css
  • Hướng dẫn chi tiết
    • Cách 1: Tải và dùng trực tiếp font
      • Giao diện HTML
    • Định dạng CSS
    • Cách 2: Dùng Google font
  • Các thuộc tính đã hướng dẫn

Video – Cách sử dụng font trong html và css

Hướng dẫn chi tiết

"Thăm ngàn, kẹp ngần nhưng vẫn không đủ chai ni (trả nợ)" nên dành vài dòng cho QUẢNG CÁO

Các bạn cần hosting PHP - WordPress nhanh, rẻ và dễ sử dụng có thể chọn Azdigi nhé.
Link đăng ký: NHẬN NGAY ƯU ĐÃI
Nếu các bạn đăng ký hosting từ link quảng cáo, mình sẽ có một ít tiền để duy trì và "chai ni".

Cách 1: Tải và dùng trực tiếp font

Giao diện HTML

Định dạng CSS

Cách 2: Dùng Google font

Hướng dẫn import font css - nhập css phông chữ

"Ra đời, cuộc sống bươm chải, có làm vẫn không có ăn" nên phải gắn QUẢNG CÁO

Các bạn cần hosting WordPress nhanh, rẻ và dễ sử dụng có free SLL hãy chọn Azdigi nhé.
Link đăng ký: NHẬN NGAY ƯU ĐÃI
Nếu các bạn mua hosting từ link trên, mình sẽ có một ít tiền để duy trì. Cảm ơn

Các thuộc tính đã hướng dẫn@font-face trong file css để định nghĩa font:

+ Tải font từ trên mạng về (các bạn nên chú ý vấn đề bản quyền).

+ Lưu vào thư mục chứa mã nguồn html và css. Dùng đường dẫn gián tiếp như đã hướng dẫn ở các bài trước.

+ Trong file css

Giao diện HTML

Hướng dẫn import font css - nhập css phông chữ

Định dạng CSS

Hướng dẫn import font css - nhập css phông chữ
Cách 2: Dùng Google font

Cách 2: Dùng Google font

Các thuộc tính đã hướng dẫn

+ Tải font từ trên mạng về (các bạn nên chú ý vấn đề bản quyền).

+ Lưu vào thư mục chứa mã nguồn html và css. Dùng đường dẫn gián tiếp như đã hướng dẫn ở các bài trước.Family selected.

+ Trong file css

Dùng @font-face trong file css để định nghĩa font:

Hướng dẫn import font css - nhập css phông chữ
+ src:url(đường dẫn đến file font). Đường dẫn bao gồm luôn cả phần đuôi file.

+ thuộc tính font-family trong trường hợp này có tác dụng đặc tên cho font mà chúng ta muốn dùng.

Hướng dẫn import font css - nhập css phông chữ

Để áp dụng font đã định nghĩa, ta dùng thuộc tính font-famaly theo tên mà chúng ta đặt trong font-face.

Các thuộc tính đã hướng dẫn

+ Tải font từ trên mạng về (các bạn nên chú ý vấn đề bản quyền).

+ Lưu vào thư mục chứa mã nguồn html và css. Dùng đường dẫn gián tiếp như đã hướng dẫn ở các bài trước.

+ Trong file css

Dùng @font-face trong file css để định nghĩa font:

+ src:url(đường dẫn đến file font). Đường dẫn bao gồm luôn cả phần đuôi file.

+ thuộc tính font-family trong trường hợp này có tác dụng đặc tên cho font mà chúng ta muốn dùng.

Để áp dụng font đã định nghĩa, ta dùng thuộc tính font-famaly theo tên mà chúng ta đặt trong font-face.

Thêm @font-face

Hướng dẫn tóm tắt, phần chi tiết sẽ trình bày trong video bên trên.

+ Vào google search, tìm kiếm từ khóa “Google font” hoặc vào đường dẫn https://fonts.google.com

+ Chọn font muốn sử dụng. Mở hộp thao5i nhỏ dưới màn hình Family selected.

Trong tab customize, chọn các định dạng sẽ được hỗ như như bold (in đậm), italic (in nghiêng), light (nét mảnh) …

Lưu ý: càng có nhiều định dạng hỗ trợ càng load lâu hơn.

Cách sử dụng google font trong html và css

Trong tab Embed, copy đoạn ….  và dán vào thẻ head trong file html.

Để áp dụng font, các bạn dùng thuộc tính font-family theo hướng dẫn của Google.

+ float: left (right) dồn các khốidownload

+ overflow: hiddencomment bên dưới, qua email, hoặc nhắn tin qua Fanpage Góc làm web.

+ display: blockLikeShare nếu thấy bài viết thú vị.

+ margin và padding

Hướng dẫn import font css - nhập css phông chữ