4.1 Thuộc tính font-style
CSS cung cấp nhiều thuộc tính để quản lý font chữ và hiển thị của chúng trên các trang web. Các thuộc tính font-style, font-variant và font-stretch cho phép tùy chỉnh kiểu chữ, cách hiển thị và độ rộng của nó. Hãy cùng xem xét từng thuộc tính này chi tiết hơn.
Thuộc tính font-style xác định kiểu chữ. Nó được sử dụng để thiết lập kiểu chữ nghiêng (italic) hoặc kiểu chữ bình thường.
Giá trị:
normal: kiểu chữ bình thường (mặc định)italic: chữ nghiêng (italic)oblique: chữ nghiêng, tương tự italic nhưng khác ở cách nghiêng
Ví dụ sử dụng:
.normal {
font-style: normal;
}
.italic {
font-style: italic;
}
.oblique {
font-style: oblique;
}
<body>
<p class="normal">Đây là chữ bình thường.</p>
<p class="italic">Đây là chữ nghiêng (italic).</p>
<p class="oblique">Đây là chữ nghiêng (oblique).</p>
</body>
4.2 Thuộc tính font-variant
Thuộc tính font-variant quản lý hiển thị chữ cái viết hoa (small caps). Nó cho phép thay đổi font chữ để tất cả các chữ cái trở thành chữ hoa, nhưng với kích thước nhỏ hơn cho các chữ cái ban đầu là chữ thường.
Giá trị:
normal: chữ bình thường (mặc định)small-caps: chữ viết hoa nhỏ
Ví dụ sử dụng:
.normal {
font-variant: normal;
}
.small-caps {
font-variant: small-caps;
}
<body>
<p class="normal">Đây là chữ bình thường.</p>
<p class="small-caps">Đây là chữ viết hoa nhỏ.</p>
</body>
Các giá trị bổ sung (CSS Fonts Level 4)
CSS Fonts Level 4 thêm các giá trị bổ sung cho thuộc tính font-variant, như là all-small-caps, petite-caps, all-petite-caps, unicase và titling-caps. Tuy nhiên, chúng không được hỗ trợ trên tất cả các trình duyệt.
4.3 Thuộc tính font-stretch
Thuộc tính font-stretch quản lý mức độ co hay giãn của font chữ. Nó thay đổi độ rộng của font, mà không ảnh hưởng đến chiều cao, và được sử dụng để chọn lựa kiểu font phù hợp nếu có sẵn.
Giá trị:
normal: độ rộng font chữ bình thường (mặc định)ultra-condensed: font chữ cực kỳ coextra-condensed: font chữ rất cocondensed: font chữ cosemi-condensed: font chữ hơi cosemi-expanded: font chữ hơi giãnexpanded: font chữ giãnextra-expanded: font chữ rất giãnultra-expanded: font chữ cực kỳ giãn
Ví dụ sử dụng:
.normal {
font-stretch: normal;
}
.condensed {
font-stretch: condensed;
}
.expanded {
font-stretch: expanded;
}
<body>
<p class="normal">Đây là chữ với độ rộng font chữ bình thường.</p>
<p class="condensed">Đây là chữ với độ rộng font chữ co lại.</p>
<p class="expanded">Đây là chữ với độ rộng font chữ giãn ra.</p>
</body>
GO TO FULL VERSION