Trong mội trang web đôi lúc chúng ta cần in đậm, in nghiêng hay thay đổi font chữ của một đoạn văn bản nào đó mà không muốn sử dụng thẻ HTML để tác động. Chúng ta hoàn toàn có thể làm được điều đó với các thuộc tính font trong CSS.

1, Thuộc tính font-family.

-Thuộc tính font-family trong CSS có tác dụng thay đổi font chữ của thành phần được chọn.

Cú Pháp:

Selector{
    font-family: value;
}

Trong đó: value là tên font chữ mà các bạn muốn sử dụng.

VD: Xác định font chữ cho thẻ p là Arial.

p{
    font-family: Arial;
}

Xem Kết Quả

2, Thuộc tính font-size.

-Thuộc tính font-size trong CSS có tác dụng xác định kích cỡ của thành phần được chọn.

Cú Pháp:

Selector{
    font-size: value;
}

Trong đó: value là kích thước font chữ của thành phần đươc chọn. đơn vị có thể là px, em, %, ...

VD: Xác định font-size cho thẻ p có kích thước 22px.

p{
    font-size: 22px;
}

Xem Kết Quả

3, Thuộc tính font-style.

-Thuộc tính font-style trong CSS có tác dụng xác định kiểu chữ cho thành phần được chọn.

Cú Pháp:

selector{
    font-style: value;
}

Trong đó, value là một trong các giá trị sau:

• normal: bình thường.
• italic: chữ in nghiêng.
• oblique: in nghiêng nhưng chữ không bị nhạt.

VD:

p.normal{
    font-style: normal;
}
p.italic{
    font-style: italic;
}
p.oblique{
    font-style: oblique;
}

Xem Kết Quả

4, Thuộc tính font-variant.

-Thuộc tính font-variant trong CSS có tác dụng xác định kiểu chữ cho thành phần được chọn.

Cú Pháp:

selector{
    font-variant: value;
}

Trong đó value là một trong các giá trị sau:

• normal: Bình thường.
• small-caps: Chuyển đổi sang chữ in hoa.
• inherit: Kế thừa từ thành phần cha.

VD:

p.normal{
    font-variant: normal;
}
p.small-caps{
    font-variant: small-caps;
}
p.inherit{
    font-variant: inherit;
}

Xem Kết Quả

5, Thuộc tính font-weight.

-Thuộc tính font-weight trong CSS có tác dụng thiết lập xem chữ được hiển thị là chữ đậm hay chữ thường.

Cú Pháp:

selector{
    font-weight: value;
}

Trong đó value là một trong các giá trị sau:

• normal: Bình thường.
• bold: Chữ đậm.
• Hoặc có thể là một giá trị số cụ thể.

VD:

p.normal{
    font-weight: normal;
}
p.bold{
    font-weight: bold;
}
p.number{
    font-weight: 700;
}

Xem Kết Quả

6, Lời Kết.

-Như vậy phần này mình đã trình bày với các bạn 5 thuộc tính trong CSS giúp chúng ta tác động vào font chữ, tuy nhiên thì vẫn còn một số thuộc tính khác rất ít khi sử dụng mà mình không nhắc tới ở đây.