Nội dung chính Show
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 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 Cú pháp: 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ị Các font cơ bản trên máy tínhMộ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
Sans Serif
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 stackNế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-styleThuộc tính In đậm chữ viết với font-weightViệc tùy chỉnh in đậm chữ viết có hẳn một thuộc tính riêng đó là 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à 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
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ụ:
Lời kếtHhmm, 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ạmBé 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. |