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:
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 Show
Giá trị của thuộc tính font-size có thể xác định theo đơn vị:
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Ô ĐẬMThuộ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:
Thiết lập CHỮ IN NGHIÊNGThuộ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:
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à:
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,....)
Xem ví dụ Lưu ý:
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. |