Bên cạnh việc trang trí văn bản với CSS mà ta đã học ở phần trước, nhưng để đoạn văn bản có thêm sức sống thì không thể thiếu việc trang trí hoặc thiết lập lại việc hiển thị font chữ cho đoạn văn bản đó.Không giống như các thuộc tính trang trí văn bản, các thuộc tính thiết lập font chữ được sử dụng thường xuyên khá là ít nên bạn có thể dễ dàng nhớ được. Cụ thể là chúng ta chỉ cần sử dụng thuộc tính font-family (chọn kiểu font chữ), font-weight (độ “mập” của chữ) và color (màu chữ).

Thiết lập font chữ với font-family

Để thiết lập font chữ cho văn bản, chúng ta sẽ sử dụng thuộc tính font-family và giá trị của nó là tên các loại font chữ cần sử dụng.

Cú pháp: font-family: tên-font, tên-font-backup, tên-font-backup,...;

Trong đó, tên font đầu tiên sẽ ưu tiên hiển thị, nếu máy tính người dùng không có font đó thì nó sẽ sử dụng font backup tiếp theo và cứ tiếp tục như thế.

Cú pháp thì dễ rồi, nhưng cái quan trọng nhất của thuộc tính này là bạn sẽ chọn font gì để sử dụng.

Các font chữ được thiết lập trong CSS theo cách thông thường thì nó sẽ lấy font chữ trên máy tính ra để hiển thị. Điều này có nghĩa là nếu bạn thiết lập một font mà trên máy của người dùng không có thì nó sẽ không hiển thị được.

Khi thiết lập font chữ, bạn cần biết trước tiên là hai giá trị serif và sans-serif. Trong đó, serif là giá trị font kiểu có chân và sans-serif là giá trị kiểu font không chân và các font này sẽ lấy dựa theo font chữ cơ bản trên máy tính.

Các font cơ bản trên máy tính

Một lời khuyên khi sử dụng font chữ trên website là nên ưu tiên việc sử dụng các font cơ bản trên máy tính mà đại đa số người dùng máy tính đều có. Các font cơ bản trên máy tính bao gồm:

Serif

• Palatino
• Time New Roman
• Georgia

Sans Serif

• Arial
• Helvetica
• Verdana
• Tahoma

Bạn có thể dùng một tập hợp font stack các font chữ cơ bản trên máy tính để dự phòng. Ví dụ:

font-family: Helvetica, Arial, Tahoma, sans-serif;

Tra cứu font stack

Nếu bạn có nhu cầu tham khảo các font chữ phổ biến nhất trên máy tính và copy đoạn code sử dụng font chữ tối ưu nhất thì bạn có thể tra cứu tại trang www.cssfontstack.com để lấy font stack chuẩn và an toàn hơn để chắc chắn website mình hiển thị tốt với đại đa số người dùng, cả Windows và Mac.

font-style

Thuộc tính font-style là để bạn thiết lập chữ viết được hiển thị dưới dạng in nghiêng hoặc bình thường. Thuộc tính này có 3 giá trị là normal (bình thường), italic (in nghiêng), oblique (cũng là nghiêng).

In đậm chữ viết với font-weight

Việc tùy chỉnh in đậm chữ viết có hẳn một thuộc tính riêng đó là font-weight. Giá trị của nó là là từ100,200, 300,….900, số càng lớn thì chữ càng đậm và “mập” ra.

Ngoài ra nếu bạn không thích dùng số thì bạn có thể dùng các giá trị kiểu chữ lànormal,bold. Nếu phần tử mẹ của nó đã được thiết lập font-weight thì có thể dùng giá trị lighter và bolder để thiết lập độ đậm tương đối.

Màu chữ với thuộc tính color

Để thiết lập màu chữ, bạn sẽ dùng thuộc tính color và thuộc tính này hiện tại hỗ trợ chính thức 3 kiểu giá trị biểu diễn màu sắc cần sử dụng đó là kiểu tên, kiểu HEX và kiểu RBG. Về ý nghĩa về các kiểu này mình sẽ giải thích ở một bài học khác, nhưng hiện tại bạn có thể tra cứu tên màu hay mã màu tại đây.

  body {
     color: #333333;
}

Thay đổi kích thước chữ với font-size

Để đổi kích thước của chữ, bạn có thể sử dụng thuộc tính font-size và thuộc tính này chỉ có một giá trị duy nhất là số kèm đơn vị đo lường. Ví dụ:

  p {
  font-size: 16px;
}

Lời kết

Hhmm, có vẻ bây giờ văn bản trên website của bạn đã có hồn một xíu rồi thông qua việc ứng dụng các thuộc tính trang trí văn bản ở bài trước và các thuộc tính trang trí chữ viết ở bài này. Vậy chúng ta sẽ tìm hiểu về cái gì ở phần sau nữa? Cứ bấm qua bài tiếp theo sẽ rõ, khá quan trọng đấy nhé.