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.
Nội dung chính
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
+ 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.
Giao diện HTML
Định dạng CSS
Cách 2: Dùng Google font
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.
Trong tab Embed, copy đoạn <link>….</link> 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.
Các thuộc tính đã hướng dẫn
+ float: left (right) dồn các khối
+ overflow: hidden
+ display: block
+ margin và padding
+ border : viền, 1px (độ dày) black (màu) solid (loại nét)
+ text-align : canh lề
+ font-size : kích thước.
+ font-weight : bold độ đậm nhạt, giống như thẻ <b></b>
+ font-family : kiểu chữ
+ font-style: italic : tạo chữ in nghiêng
+ float : left, dồn sang một bên
+ text-decoration: none, underline.
+ line-height: 20px: độ giãn dòng.
+ color: (màu chữ) dùng green, red hay mã màu
+ background-color: (màu nền)black
+ background-image: url(imgage source).
Code mẫu: download
Nếu có thắc mắc, đặt câu hỏi bằng cách comment bên dưới, qua email, hoặc nhắn tin qua Fanpage Góc làm web.
Đừng quên Like, Share nếu thấy bài viết thú vị.
Chào bạn.Nhờ bạn một chút. Mình đang thiết kế website hamisky .com và sử dụng font chữ Roboto condensed. Nhưng font này không được cài sắn trên máy tính vì vậy máy có máy không. Nếu mình font thông dụng thì menu bị tràn hoặc nếu không phải co nhỏ size. Bạn có thể cho biết có code html để nén chữ lại cho gọn không (dạng như condensed trong word)? Cám ơn bạn
Mình đang thắc mắc bạn sử dụng font roboto đó ntn, liên quan gì đến việc máy có font ko
[…] Đầu tiên các bạn tìm kiếm từ khóa Google font. Sau đó chọn font Open Sans và tải về. Bạn nào chưa hiểu rõ về Google font, có thể xem bài cách sử dụng font trong html và css. […]