Các font chữ trong CSS
Để thiết lập font cho một trang HTML hoặc cho từng phần tử trong trang, bạn sử dụng các thuộc tính sau: Show
Thiết lập Font Family trong CSSTrong CSS, có hai loại Font Family:
Để thay đổi bề mặt font của một phần tử nào đó, bạn có thể sử dụng thuộc tính font-family trong CSS. Nói chung, khi sử dụng thuộc tính font-family, bạn nên xác định nhiều hơn một giá trị. Nếu trình duyệt không hỗ trợ giá trị font đầu tiên, nó sẽ thử giá trị tiếp theo, … Bắt đầu với giá trị font mà bạn muốn và kết thúc với một generic family để trình duyệt chọn một font tương tự trong generic family nếu không có font nào có sẵn. Ghi chú: Nếu tên font có nhiều hơn một từ, thì bạn phải đặt trong trích dẫn kép, ví dụ như: "Times New Roman". Dưới đây là ví dụ minh họa cách xác định Font Family cho một phần tử. Giá trị cho thuộc tính font-family là bất kỳ tên font family hợp lệ nào.
Kết quả là: Phan noi dung nay duoc hien thi voi mot trong cac font: georgia, garamond, hoac gia tri mac dinh la serif phu thuoc vao trinh duyet cua ban. Thiết lập Font Style trong CSSThuộc tính font-style trong CSS thường được sử dụng khi bạn muốn xác định một font chữ nghiêng. Các giá trị mà thuộc tính này có thể nhận là: normal, italic hoặc oblique. Trong đó, normal là hiển thị văn bản như bình thường, italic và oblique thì khá giống nhau, để hiển thị dạng nghiêng. Tuy nhiên, oblique ít được hỗ trợ hơn. Ví dụ
Kết quả là: Doan van nay se duoc hien thi duoi dang in nghieng. Thiết lập Font Variant trong CSSĐể tạo các chữ hoa nhỏ (dạng small-cap), bạn sử dụng thuộc tính font-variant trong CSS. Thuộc tính này nhận hai giá trị là normal và small-caps. Ví dụ:
Kết quả là: Doan van nay se duoc hien thi duoi dang cac chu hoa nho. Thiết lập Font Weight trong CSSĐể thiết lập mức độ đậm của văn bản, bạn sử dụng thuộc tính font-weight trong CSS. Thuộc tính này có thể nhận các giá trị: normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900.
Kết quả là: Doan van nay duoc hien thi duoi dang in dam. Doan van nay duoc hien thi duoi dang in dam hon. Doan van nay co Font Weight la 500.. Thiết lập Font Size trong CSSĐể thiết lập kích cỡ font, bạn sử dụng thuộc tính font-size trong CSS. Thuộc tính này có thể nhận các giá trị tương đối hoặc tuyệt đối: xx-small, x-small, small, medium, large, x-large, xx-large, smaller, larger, size in pixels hoặc in %.Ví dụ
Kết quả là: Doan van nay co Font Size la 20 pixel. Doan van nay co Font Size la small Doan van nay co Font Size la large Việc quản lý kích cỡ văn bản trong các phần khác nhau là rất quan trong trong thiết kế Web. Tuy nhiên, bạn không nên sử dụng thuộc tính font-size-adjust để làm cho các đoạn văn trông giống như các phần tiêu đề, hoặc tiêu đề lại trông giống như đoạn văn như trong phần Thuộc tính font-size-adjust trong CSS dưới đây. Lời khuyên hữu ích cho bạn là hãy sử dụng các thẻ HTML phù hợp, ví dụ như các thẻ 2 cho phần tiêu đề và thẻcho các đoạn văn. Thuộc tính font-size-adjust trong CSSSử dụng thuộc tính font-size-adjust trong CSS, bạn có thể điều chỉnh kích cỡ văn bản của một phần tử. Thuộc tính này giúp bạn điều chỉnh x-height để làm cho font dễ đọc hơn. Giá trị của thuộc tính là bất kỳ số nào. Ví dụ:
Kết quả là: Doan van nay su dung thuoc tinh font-size-adjust co gia tri 0.61. Thiết lập Font Size bằng Pixel trong CSSViệc thiết lập kích cỡ font bằng Pixel giúp bạn kiểm soát hoàn toàn kích cỡ văn bản. Ví dụ minh họa:
Kết quả là: Ghi chú: Nếu bạn sử dụng Pixel, bạn vẫn có thể sử dụng tính năng Zoom để tăng giảm kích cỡ của cả trang web. Neu gia tri cua thuoc tinh nay khong co hieu qua, tuc la may tinh cua ban khong ho tro hai gia tri: condensed hoac expanded. Thiết lập Font Size bằng Em trong CSSĐể cho phép người dùng tăng giảm kích cỡ của văn bản (trong menu của trình duyệt), nhiều lập trình viên sử dụng đơn vị em thay cho pixel. Đơn vị em được đề nghị sử dụng bởi W3C. 1em thì bằng với kích cỡ font hiện tại. Kích cỡ văn bản mặc định là 16px, do đó kích cỡ mặc định của 1em sẽ là 16px. Ví dụ
Trong ví dụ trên, kích cỡ văn bản được xác định bằng đơn vị em là giống như trong ví dụ trước khi được xác định bằng đơn vị pixel. Tuy nhiên, với em, bạn có thể căn chỉnh kích cỡ văn bản trong mọi trình duyệt. Tuy nhiên, trong một số trình duyệt IE cũ, văn bản sẽ hiển thị lớn hơn nhiều khi chúng được tạo lớn hơn và hiển thị nhỏ hơn nhiều khi chúng được tạo nhỏ hơn. Sử dụng kết hợp % và em trong CSSGiải pháp để cho phần định nghĩa kích cỡ font của bạn có thể làm việc đúng trên tất cả mọi trình duyệt, bạn nên thiết lập một font-size mặc định bằng giá trị % cho phần tử . Ví dụ
Thuộc tính font trong CSSĐể tối thiểu hóa lượng code cần phải viết, bạn có thể sử dụng thuộc tính font trong CSS để thiết lập tất cả thuộc tính liên quan tới Font đã được trình bày ở phần trên. Trong thuộc tính font này, bạn thiết lập các thuộc tính liên quan tới font theo thứ tự như trong cú pháp sau:
Trong đó, giá trị của hai thuộc tính font-size và font-family là bắt buộc. Nếu bạn không xác định một trong các giá trị khác thì giá trị mặc định sẽ được sử dụng (nếu có). Ghi chú: thuộc tính line-height trong CSS được sử dụng để thiết lập khoảng cách giữa các dòng. Ngoài một số giá trị đã được liệt kê ở trên, thuộc tính font trong CSS có thể nhận các giá trị khác như trong ví dụ sau: |