Các font-variantbất động sản cho phép bạn thay đổi các văn bản nhắm mục tiêu đến mũ nhỏ. Thuộc tính này đã được mở rộng trong CSS3.
p:first-line ( font-variant: small-caps; /* default is `normal` */ )Trước CSS3, thuộc tính này chấp nhận một trong hai giá trị có thể có: normal(cách văn bản được hiển thị theo mặc định) và small-caps.
Giá trị của small-capssẽ hiển thị văn bản bằng chữ hoa nhỏ hơn chữ hoa thông thường. Điều này không ghi đè bộ chữ hoa trong nội dung, bên trong đánh dấu. Ví dụ:
Trong bản demo trên, cả hai đoạn đều được đặt thành font-variant: small-caps. Đoạn đầu tiên chỉ có chữ hoa đầu tiên trong phần đánh dấu, vì vậy nó xuất hiện như mong đợi (chữ hoa đầu tiên, phần còn lại viết hoa nhỏ).
Dòng thứ hai được viết bằng tất cả chữ hoa trong đánh dấu, dòng này sẽ ghi đè small-capsgiá trị, đặt mọi thứ ở dạng chữ hoa thông thường.
Xa hơn nữa, nếu các đoạn văn này được đặt thành font-variant: small-capsvà text-transform: lowercase, thì chúng sẽ xuất hiện ở tất cả các chữ hoa nhỏ. Tương tự, nếu các đoạn này được đặt thành font-variant: small-capsvà text-transform: uppercase, thì chúng sẽ xuất hiện bằng tất cả các chữ hoa thông thường.
font-variantcó thể được đưa vào như một phần của fontkhai báo tốc ký.
Bổ sung mới trong CSS3
Trong CSS3, font-varianttrở thành một cách viết tắt và có thể chấp nhận nhiều giá trị, bao gồm all-small-caps, petite-caps, all-petite-caps, titling-caps, và unicase, trong số những người khác.
Hỗ trợ trình duyệt
| Trình duyệt Chrome | Safari | Firefox | Opera | I E | Android | iOS |
|---|---|---|---|---|---|---|
| Làm | Làm | Làm | Làm | Làm | Làm | Làm |
Các giá trị mới được thêm vào trong CSS3 không có trình duyệt hỗ trợ, vì vậy bảng trên biểu thị sự hỗ trợ cho giá trị của small-caps.
Trong IE6 / 7, cài đặt font-variant: small-capssẽ khiến bất kỳ văn bản nào được đặt thành text-transform: uppercasehoặc hiển thị text-transform: lowercasegiống như text-transform: none.