Tiếp tục chuỗi hành trình tìm hiểu về CSS, bài viết này CNET sẽ hướng dẫn về cách điều chỉnh phông chữ trong CSS để tạo ra trải nghiệm đọc hiệu quả. Chúng ta sẽ khám phá những thuộc tính quan trọng như font-family, font-size, font-weight, và nhiều lựa chọn khác để tùy chỉnh phông chữ trên trang web. Ngoài ra, với những chi tiết này, chúng ta còn có thể tạo ra thiết kế hấp dẫn trên trang web của mình, cùng khám phá cách làm này để làm cho văn bản trên trang web của mình trở nên ấn tượng!
Thuộc tính font bao gồm nhiều giá trị khác nhau để xác định các thuộc tính khác nhau của font:
- font-family
- font-style
- font-variant
- font-weight
- font-size/line-height
1.Font-family
Generic Font Families - Họ phông chữ chung
Trong CSS có năm họ phông chữ chung đó là:
- Serif (font chữ có chân): có một nét nhỏ ở rìa mỗi chữ cái. Chúng tạo cảm giác trang trọng và sang trọng (VD: Times New Roman,Georgia)
- Sans-serif (font chữ không chân): có đường nét rõ ràng (không có nét nhỏ kèm theo, VD: Arial,Verdana). Chúng tạo ra một cái nhìn hiện đại và tối giản.
- Monospace: ở đây tất cả các chữ cái đều có cùng chiều rộng cố định, tạo ra một cái nhìn máy móc (VD: Courier New, Lucida Console)
- Cursive: bắt chước chữ viết tay của con người (VD: Brush Script MT, Lucida Handwriting)
- Fantasy: phông chữ trang trí/vui tươi (VD: Copperplate, Papyrus)
Tất cả các tên phông chữ khác nhau đều thuộc về một trong các họ phông chữ chung.
Hình ảnh bên trên mô tả Sự khác biệt giữa phông chữ Serif và Sans-serif.
Lưu ý: Trên màn hình máy tính, phông chữ sans-serif được đánh giá là dễ đọc hơn phông chữ serif
Chúng ta sử dụng thuộc tính font-family để chỉ định phông chữ của văn bản, dùng để xác định loại font chữ mà một phần tử văn bản sẽ sử dụng. Bạn có thể chỉ định một hoặc nhiều font chữ ưu tiên, và nếu font chữ đầu tiên không khả dụng, trình duyệt sẽ thử các font chữ sau đó.
Ví dụ dưới đây về cách sử dụng font-family, nội dung trong thẻ <p> có tên class là ”p1”:
- “Times New Roman” là tên của font chữ ưu tiên đầu tiên.
- “Times” là font chữ thứ hai nếu font đầu tiên không khả dụng.
- “serif “ là font chữ thay thế chung nếu cả hai font trước đó không khả dụng.
Lưu ý : Nếu tên phông chữ có nhiều hơn một từ thì phải đặt trong dấu ngoặc kép, như: "Time New Roman" và tên phông chữ phải được phân tách bằng dấu phẩy
2. Font-style
Thuộc tính font-style chủ yếu được sử dụng để chỉ định văn bản in nghiêng.
Thuộc tính này có ba giá trị:
- normal - Văn bản được hiển thị bình thường
- italic - Văn bản được hiển thị in nghiêng
- oblique - Văn bản "nghiêng" (oblique rất giống với italic, nhưng ít được hỗ trợ hơn bởi các trình duyệt hiện nay)
Ví dụ trên, để làm cho văn bản trong một phần tử có kiểu chữ nghiêng cụ thể là trong thẻ <p> có class=”italic”, bạn có thể sử dụng font-style: italic
3.Font-variant
Thuộc tính font-variant sử dụng để xác định kiểu biến thể chữ của văn bản bên trong một phần tử, chỉ định liệu văn bản có được hiển thị bằng phông chữ viết hoa nhỏ hay không. Có hai giá trị chính cho font-variant:
- normal: Đây là giá trị mặc định, không áp dụng bất kỳ biến thể chữ nào.
- small-caps: Biến thể chữ in hoa nhỏ. Khi được áp dụng, chữ cái viết hoa sẽ được thay thế bằng chữ cái in hoa nhỏ hơn.
Trong phông chữ viết hoa nhỏ, tất cả các chữ cái viết thường đều được chuyển thành chữ in hoa. Tuy nhiên, các chữ in hoa được chuyển đổi sẽ xuất hiện ở cỡ chữ nhỏ hơn các chữ in hoa ban đầu trong văn bản.
4. Font-weight
Thuộc tính font-weight trong CSS được sử dụng để xác định độ đậm (trọng lượng) của văn bản bên trong một phần tử. Giá trị của font-weight có thể là các số từ 100 đến 900 hoặc các giá trị:
- normal: Độ đậm bình thường (tương đương với giá trị 400).
- bold: Độ đậm lớn (tương đương với giá trị 700).
- lighter: Làm cho chữ trở nên nhẹ hơn so với giá trị font-weight của phần tử cha.
- bolder: Làm cho chữ trở nên đậm hơn so với giá trị font-weight của phần tử cha
Ví dụ trên, để làm cho văn bản trong thẻ <p> có class="thick" có kiểu chữ đậm, bạn có thể sử dụng font-weight: bold;
Lưu ý: Hiển thị của kiểu chữ đậm có thể phụ thuộc vào kiểu chữ cụ thể và khả năng hỗ trợ của trình duyệt. Một số font chữ không hỗ trợ tất cả các giá trị độ đậm, và trong một số trường hợp, giá trị độ đậm có thể được làm tròn hoặc hiển thị không chính xác.
5. Font-size/Line-height
Font-size
- Font-size trong CSS là một thuộc tính quan trọng dùng để xác định kích thước của văn bản trong một phần tử.
- Khả năng quản lý kích thước văn bản rất quan trọng trong thiết kế web. Tuy nhiên, bạn không nên sử dụng chức năng điều chỉnh cỡ chữ để đoạn văn trông giống tiêu đề, hoặc tiêu đề giống đoạn văn. Luôn sử dụng các thẻ HTML thích hợp, như <h1> - <h6> cho tiêu đề và <p> cho các đoạn văn.
- Giá trị kích thước Font-size có thể là kích thước tuyệt đối hoặc tương đối:
Kích thước tuyệt đối:
- Đặt văn bản theo kích thước được chỉ định (pixels (px), points (pt), inches (in), centimeters (cm), millimeters (mm))
- Không cho phép người dùng thay đổi kích thước văn bản trong tất cả các trình duyệt
- Kích thước tuyệt đối rất hữu ích khi biết kích thước vật lý của đầu ra
Kích thước tương đối:
- Đặt kích thước tương ứng với các phần tử xung quanh
- Cho phép người dùng thay đổi kích thước văn bản trong trình duyệt
- Sử dụng phần trăm (%) hoặc em (em) đối với kích thước tương đối với phần tử cha.
- Ngoài ra, còn có thể đo lường bằng một đơn vị vị, bằng cách đó kích thước văn bản sẽ tuân theo kích thước của cửa sổ trình duyệt
Lưu ý: Nếu bạn không chỉ định cỡ chữ, kích thước mặc định cho văn bản thông thường, như đoạn văn, là 16px (16px=1em).
Line-height
Line-height là một thuộc tính quan trọng được sử dụng để kiểm soát khoảng cách giữa các dòng văn bản bên trong một phần tử. Cũng giống như font-size, line-height có thể được đặt với một giá trị cụ thể, phần trăm, hoặc theo các đơn vị đo lường khác.
CSS cung cấp những công cụ mạnh mẽ cho việc tùy chỉnh văn bản. Sự linh hoạt và các thuộc tính khác giúp tạo ra giao diện hấp dẫn và dễ đọc. Sử dụng font trong CSS là cách hiệu quả để định hình sự truyền đạt thông tin và tạo ấn tượng đầu tiên mạnh mẽ cho người dùng trực tuyến.
Tham khảo về KHÓA HỌC LẬP TRÌNH WEB FULL-STACK tại Học viện công nghệ CNET
