Hướng dẫn kiểu chữ trong css

Ở bài hướng dẫn này, bạn sẽ được tìm hiểu một số thuộc tính định dạng chữ như sau:

• font-size - thiết lập kích cỡ chữ
• font-weight - thiết lập sự tô đậm của chữ
• font-style - thiết lập sự in nghiêng của chữ
• font-family - thiết lập kiểu chữ

Thiết lập KÍCH CỠ CHỮ

Thuộc tính font-size dùng để thiết lập kích cỡ chữ của văn bản

Giá trị của thuộc tính font-size có thể xác định theo đơn vị:

• px [Xem ví dụ]
• em [tỷ lệ 1em = 16px] [Xem ví dụ]
• % [tỷ lệ phần trăm so với kích cỡ chữ của phần tử chứa nó] [Xem ví dụ]

Lưu ý: Nếu không thiết lập kích cỡ chữ cho văn bản thì mặc định văn bản có kích cỡ chữ là 16px

Thiết lập CHỮ TÔ ĐẬM

Thuộc tính font-weight dùng để thiết lập sự tô đậm của chữ.

Thuộc tính font-weight có hai giá trị cơ bản:

• normal: không tô đậm
• bold: tô đậm

Thiết lập CHỮ IN NGHIÊNG

Thuộc tính font-style dùng để thiết lập sự in nghiêng của chữ.

Thuộc tính font-style có ba giá trị cơ bản:

• normal: không in nghiêng
• italic: in nghiêng
• oblique: in nghiêng [giống italic, nhưng độ in nghiêng ít hơn]

Thiết lập KIỂU CHỮ

Khái niệm font chữ & nhóm font chữ

Font chữ chính là kiểu chữ, mẫu mã của chữ. Ví dụ, một số font chữ quen thuộc như: Times New Roman, Arial, Lucida Console,....

Các font chữ có cùng một vài nét tương đồng nào đó về hình dáng sẽ được xếp chung một nhóm.

Có ba nhóm font chữ cơ bản là:

• Serif
• Sans-Serif
• Monospace

Bảng dưới đây là tất cả các font chữ thuộc nhóm Serif:

Bảng dưới đây là tất cả các font chữ thuộc nhóm Sans-Serif:

Bảng dưới đây là tất cả các font chữ thuộc nhóm Monospace:

Cách thiết lập kiểu chữ cho văn bản

Để thiết lập kiểu chữ cho văn bản, ta sử dụng thuộc tính font-family với giá trị là tên font chữ.

Không phải mọi trình duyệt đều hỗ trợ hết tất cả các font chữ phía trên.

Để phòng trường hợp khi ta thiết lập font chữ mà trình duyệt không hỗ trợ dẫn đến việc hiển thị không như ý, ta sẽ thiết lập thêm vài font chữ khác để se cua [nếu font một không được hỗ trợ thì sẽ đến font hai, nếu font hai không được hỗ trợ thì đến font ba,....]

p {
    font-family: "Comic Sans MS", cursive, sans-serif;
}

Xem ví dụ

Lưu ý:

• Các font chữ phải được ngăn cách nhau bởi dấu phẩy.
• Các font chữ có nhiều hơn một từ phải được đặt bên trong cặp dấu ngoặc kép " " hoặc ngoặc đơn ' '
• Font chữ cuối cùng nên là tên nhóm font chữ, vì chắc chắn tên nhóm font chữ sẽ được mọi trình duyệt hỗ trợ

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é.

Thạch Phạm

Bé Thạch 18 tuổi, hiện công tác tại AZDIGI với vị trí giữ xe và viết thuê tại ThachPham.Com. Sở thích nghiên cứu về website, DevOps, SysAdmin và xăm mình nữa. Phương châm sống của bé là "No Pain, No Gain".

Hiện tại blog tạm đóng bình luận vì mình cần tập trung thời gian vào cập nhật bài viết. Bình luận sẽ mở ra cho đến khi mình sẵn sàng.