Trang trí font chữ cho văn bản
Last updated
Last updated
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ữ 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.
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ụ:
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.
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).
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.
Để 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.
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ụ: