Để 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:

• Thuộc tính font-family: được sử dụng để thay đổi bề mặt font
• Thuộc tính font-style: được sử dụng để tạo một font chữ nghiêng hoặc chếch
• Thuộc tính font-variant: được sử dụng để tạo những chữ hoa nhỏ (small-cap)
• Thuộc tính font-weight: được sử dụng để tăng giảm độ đậm của font
• Thuộc tính font-size: được sử dụng để xác định kích cỡ font
• Thuộc tính font: sử dụng thuộc tính này nếu bạn muốn viết ít code hơn mà vẫn xác định được các thuộc tính liên quan tới font ở trên.

Thuộc tính 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.

VD:

p {
    font-family: georgia,garamond,serif;
}

Thuộc tính font-style

Thuộ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ị chính cho thuộc tính font-style gồm:

• normal: hiển thị văn bản như bình thường.
• italic: hiển thị dạng nghiêng
• oblique: há giống italic nhưng ít được hỗ trợ hơn

VD:

p {
    font-family: georgia,garamond,serif;
    font-style: italic;
}

Thuộc tính font-variant

Để tạo các chữ hoa nhỏ (dạng small-cap), bạn sử dụng thuộc tính font-variant trong CSS.

Các giá trị chính cho thuộc tính font-variant gồm:

• normal: hiển thị văn bản như bình thường.
• small-caps: Chuyển đổi kiểu chữ (thường thành hoa)

VD:

p {
    font-family: georgia,garamond,serif;
    font-variant:small-caps;
}

Thuộc tính font-weight

Để 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.

Các giá trị chính cho thuộc tính font-weight gồm:

• xx-small: văn bản sẽ có kích cỡ chữ khoảng 9px.
• x-small: văn bản sẽ có kích cỡ chữ khoảng 10px.
• small: văn bản sẽ có kích cỡ chữ khoảng 13px.
• medium: văn bản sẽ có kích cỡ chữ khoảng 16px
• large: văn bản sẽ có kích cỡ chữ khoảng 18px.
• x-large: văn bản sẽ có kích cỡ chữ khoảng 24px.
• xx-large: văn bản sẽ có kích cỡ chữ khoảng 32px.
• smaller: văn bản sẽ có kích cỡ chữ khoảng 13.3px.
• larger: văn bản sẽ có kích cỡ chữ khoảng 19.2px.
• lenght: giá trị cụ thể bằng số với đơn vị là px hoặc em với 1em=16px.
• percent: Xác định kích cỡ chữ dựa theo tỷ lệ phần trăm so với giá trị medium.
• initial: sử dụng giá trị mặc định của nó.
• inherit: kế thừa giá trị thuộc tính font-size từ phần tử cha của nó.

VD:

p.size200 {
    font-size: 200%;
}

Thuộc tính font

Để 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.

Cú pháp: font: font-style font-variant font-weight font-size/line-height font-family

VD:

p {
    font: italic small-caps bold 15px georgia;
}