Để biết cách sử dụng font trong CSS như thế nào thì mình cùng điểm qua các thuộc tính chính của font nhé.
CSS hổ rất nhiều thuộc tính font để định dạng chữ. Tuy nhiên hôm nay mình chỉ giới thiệu các thuộc tính hay sử dụng đó là: font-family, font-size, font-weight, font-style.
1. Hiển thị font chữ (font-family)
p {
font-family: Arial, sans-serif, serif;
}
Ở ví dụ trên mình đã nhập vào ba loại font khác nhau Arial, sans-serif, serif (cách nhau bởi dấu phẩy) mục đích đề phòng trường hợp máy tính của client không hỗ trợ font đầu tiên thì nó sẽ lấy font thứ 2, cứ như vậy từ trái qua phải.
2. Hiển thị kích thước font (font-size)
p{
font-size: 14px;
}
Ở ví dụ trên mình cho hiển thị kích thước font là 14px, bạn có thể thay thế thành nhiều kích thước khác nhau nhé.
3. Hiển thị độ đậm nhạt (font-weight)
p{
font-weight: 100;
}
Nếu bạn muốn hiển thị theo sở thích, bạn nên thử từng weight, các weight mình dùng là 100, 300, 500 và 700 hoặc bạn có thể dùng cơ bản như normal, bold.
4. Hiển thị style của font (font-style)
p{
font-style: italic;
}
Nó cũng gần giống như font-weight nhưng thêm là được style nghiên chữ.
Sau đây là một số trang web có font miễn phí. Chúng cho chúng ta có các nhìn tổng quan về từng loại font sẽ được hiển thị trên trang web như thế nào.
- Google Fonts (https://fonts.google.com/)
- Font Squirrel (https://www.fontsquirrel.com/)
- Font Library (https://fontlibrary.org/)
- The League Of Move Able Type (https://www.theleagueofmoveabletype.com/)
- Exljbris (https://www.exljbris.com/)
Ngoài ra bạn có thể làm riêng font lưu trên website bằng CSS. Upload file font lên website và đưa đến đường dẫn như sau, trong file .css nhé.
@font-face {
font-family: 'oswald';
src: url('/font/oswald.regular.ttf');
}
Trong đó:
- font-family: ‘oswald’; – sẽ là tên font khi bạn định dạng font theo mục đích khác nhau, nếu bạn định dạng thẻ p theo font này thì bạn cứ việc dùng như sau:
p {
font-family: oswald, sans-serif, serif;
}