Bài 17: Cách sử dụng Fonts trong css

Cách sử dụng Fonts trong css

Trong CSS, bạn có thể sử dụng các font chữ khác nhau cho các phần tử HTML bằng cách sử dụng thuộc tính font-family. Để sử dụng một font chữ đặc biệt, bạn cần có tệp font hoặc liên kết đến font từ một nguồn bên ngoài (ví dụ: Google Fonts).

Có nhiều cách để sử dụng font chữ trong CSS, dưới đây là một số cách phổ biến:

1. Sử dụng font chữ được cài đặt trên hệ thống:

Bạn có thể sử dụng các font chữ được cài đặt trên hệ thống của máy tính bằng cách chỉ định tên font chữ trong thuộc tính font-family.

Ví dụ:

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

Trong đó, Arial là tên font chữ được ưu tiên sử dụng trước, và nếu không có sẽ sử dụng các font chữ thay thế thuộc hệ thống sans-serif.

2. Sử dụng font chữ từ Google Fonts:

Google Fonts cung cấp rất nhiều font chữ miễn phí để sử dụng trong CSS. Để sử dụng một font chữ từ Google Fonts, bạn cần thực hiện các bước sau:

Tìm kiếm font chữ bạn muốn sử dụng trên trang web của Google Fonts.

Chọn font chữ và nhấn nút "Select this font".

Chọn các phong cách font chữ bạn muốn sử dụng (ví dụ: bold, italic, regular).

Sao chép mã CSS được cung cấp và dán vào tệp CSS của bạn.

Ví dụ:

/* Import font from Google Fonts */
@import url('https://fonts.googleapis.com/css?family=Roboto:400,700');

/* Use Roboto font for body text */
body {
  font-family: 'Roboto', sans-serif;
}

3. Sử dụng font chữ tải về từ một nguồn bên ngoài:

Bạn có thể sử dụng font chữ được tải về từ một nguồn bên ngoài bằng cách sử dụng @font-face.

Ví dụ:

/* Import font */
@font-face {
  font-family: 'MyFont';
  src: url('myfont.woff2') format('woff2'),
       url('myfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

/* Use MyFont for h1 text */
h1 {
  font-family: 'MyFont', sans-serif;
}

Trong đó, @font-face định nghĩa font chữ và cung cấp đường dẫn đến tệp font (src), cũng như các thuộc tính font-weight và font-style. Sau đó, font chữ có thể được sử dụng bằng cách sử dụng tên font chữ được định nghĩa trong @font-face.